微信小程序用swiper 和 movable-view实现wx.previewImage功能

注：7.13号写的残缺版，7.14号写出来了完整版来了，最终代码贴文章最下边了相对于13号代码只改了html和js，和一个app.js中的节流方法。

---------------------------------------------------------------------------------------------------------------------------------

7.13号写的-------1、需求原因：在播放的音频文件中调用wx.previewImage查看图片时会中止语音- -测试不让（怒起杀狗心），只能用swiper 和 movable-view来模拟。最终实现效果残缺，暂时只能实现将图片缩小回1倍大小后再允许执行swiper滑动。原因过程接着看。

13号效果(必须缩回一倍才能用轮播图)：

2、调试过程简单的把movable-area和movable-view嵌入进swiper，此时效果如下，swiper的滑动和缩放功能的拖动会同时触发，显然这样的效果是不行的。

<swiper class="swiper" indicator-dots="{{true}}"   indicator-color="rgb(247, 247, 247,1)"   indicator-active-color="#1bb7b5"><swiper-item class="swiper-item" wx:for="{{imgList}}" data-index="index" wx:key="index"> <movable-area class="moswiper1" scale-area><movable-view class="moswiper2" direction="all" out-of-bounds scale scale-min="1" scale-max="4"  scale-value="1"><view class="swiper-view" ><image mode="widthFix" src="{{item}}"></image></view></movable-view></movable-area>    </swiper-item>
</swiper>

3、这个时候考虑到既然放大后swiper滑动会触发，在js方法中添加放大事件监听放大倍数和html 中添加三元表达式若是放大了图片那就禁止轮播图滑动

catchtouchmove="{{amplification>1?'任意字符别问我为啥随便打个字他就好使' : ''}}"

<swiper class="swiper" indicator-dots="{{true}}"   indicator-color="rgb(247, 247, 247,1)"   indicator-active-color="#1bb7b5"><swiper-item class="swiper-item" wx:for="{{imgList}}" data-index="index" wx:key="index"  catchtouchmove="{{amplification>1?'slideshow' : ''}}"> <movable-area class="moswiper1" scale-area><movable-view class="moswiper2" direction="all" out-of-bounds scale scale-min="1" scale-max="4"  scale-value="1"><view class="swiper-view" ><image mode="widthFix" src="{{item}}"></image></view></movable-view></movable-area>    </swiper-item>
</swiper>js
amplification:1 ,  //放大倍数movableScale(e){//放大事件，只要图片放大就给轮播图禁止了console.log('放大倍数=====>',e.detail);this.setData(({amplification:e.detail.scale}))
}

4、如上基本是没问题了但是会触发小bug，比如用一根手指先滑动轮播图到一半，然后第二根手机放上缩放可以触发，这样翻过去的话因为amplification>1了，所以滑不回来了。

5、不一层层细写了在这说一下之后的逻辑，直接出最终代码。如上问题我又加了swiper的bindchange事件只要划过去了就设置amplification=1 ，发现虽然能滑了但是轮播图变畸形了，第一张大第二张小，之前的amplification有用又仿佛无用。最后我添加了位移事件只要轮播图移动开始就禁止缩放，和轮播图移动结束事件结束了就允许滑动。

上最终代码、效果

①、html 我这里之前设置的横屏竖屏事件，然后横屏那一段代码没有写放大拖动这些事件

<match-media orientation="portrait" bindtap="close" class="preview-img-mask" wx:if="{{imgList!=0}}"><swiper class="swiper" indicator-dots="{{true}}"   indicator-color="rgb(247, 247, 247,1)"     indicator-active-color="#1bb7b5" bindchange='onChange' bindtransition='alter' bindanimationfinish='finish'><swiper-item class="swiper-item" wx:for="{{imgList}}" data-index="index" wx:key="index" catchtouchmove="{{amplification>1?'slideshow' : ''}}"> <movable-area class="moswiper1" scale-area><movable-view class="moswiper2" direction="all" out-of-bounds scale scale-min="1" scale-max="4" scale="{{!isstop}}" scale-value="1" bindscale="movableScale"><view class="swiper-view" catchtap="nothing"><image mode="widthFix" src="{{item}}"></image></view></movable-view></movable-area>    </swiper-item></swiper></match-media>
<match-media orientation="landscape" bindtap="close" class="preview-img-mask" wx:if="{{imgList!=0}}"><swiper class="swiper1" indicator-dots="{{true}}"   indicator-color="rgb(247, 247, 247,1)"    indicator-active-color="#1bb7b5" bindtransition='onChange'><swiper-item class="swiper-item1" wx:for="{{imgList}}" data-index="index" wx:key="index"><view class="swiper-view1" catchtap="nothing"><image show-menu-by-longpress src="{{item}}"></image></view></swiper-item></swiper>
</match-media>

②、js 我是写在了组件里，可以自己cv出去自己需要的部分，properties放自己的data里面就行了

// 我这里是个组件
Component({/*** 组件的属性列表*/properties: {imgList:{value:[],type:Array},},/*** 组件的初始数据*/data: {swiperIndex: 0,  // 第一次加载默认第一张图片选中amplification:1 ,  //放大倍数iscurrent:0  ,     //当前在哪一张isdx:'',          //记录xisdy:'',          //记录yisstop:false,        //禁止缩放},/*** 组件的方法列表*/methods: {close(){// debuggerthis.triggerEvent("close")},onChange(e){                       //如果不加这个方法那放大和滑动屏幕如果同时触发了let current = e.detail.current      //那因为此时amplification可能大于设定值将不可滑动if (current != this.data.iscurrent) {// console.log('只要图片改变了,就可以滑动~~~~');this.setData({amplification:1,})}this.setData({iscurrent:current})},alter(e){  //swiper位移事件let [dx, dy] = [e.detail.dx,e.detail.dy];this.setData({isdx:dx,isdy:dy})//这个>10是因为手指触碰时会被轻微的滑动影响到而造成不能缩放if (this.data.isdx>10 || this.data.isdy>10) {  // console.log('说明有位移操作，此时禁止缩放~~');this.setData({isstop:true})}else{//否则允许缩放this.setData({isstop:false})}},finish(e){  //轮播图移动完毕事件this.setData({isdx:0,      //xy每一次跳转完毕赋值0  给下面重新判断用，并且允许新页面缩放isdy:0,isstop:false})},nothing(e){console.log(e);   },    movableScale(e){//放大事件，只要图片放大就给轮播图禁止了console.log('放大倍数=====>',e.detail);this.setData(({amplification:e.detail.scale}))}}
})

③、css

.preview-img-mask{position: fixed !important;background-color: #000000;top: 0;bottom: 0;left: 0;right: 0;z-index: 10000;display: flex;align-items: center;justify-content: center;
}
.swiper-item{display: flex;align-items: center;justify-content: center;
}
.swiper{width: 100%;height: 90%;/* display: flex;justify-content: center;align-items: center; */
}
.swiper-view{width: 100%;
}
.swiper-view image{width: 100%;
}.swiper-item1{display: flex;align-items: center;justify-content: center;
}
.swiper1{width: 90%;height: 100%;
}
.swiper-view1{width: 100%;height: 100%;
}
.swiper-view1 image{width: 100%;height: 100%;
}
.moswiper1{width: 99%;height: 420rpx;
}
.moswiper2{width: 100%;height: 100%;
}

-------------------------------------------------------------------------------------------------------------------------------

7.14号完整版，加了监听移动画布事件，通过监听x轴与上一次的坐标位置大小关系确定左右移动，再监听触到边界if (e.detail.source == "out-of-bounds" || e.detail.source == "touch-out-of-bounds") 的这个字段，确定是左还是右触碰到边界，然后动态修改轮播图的下标完成，虽然有一点小瑕疵大家多测试就会发现了，但是整体功能是实现的。小瑕疵捣鼓了两三个小时没捣鼓好烦躁了。。。。。先把代码贴这里吧。

<match-media orientation="portrait" bindtap="close" class="preview-img-mask" wx:if="{{imgList!=0}}"><swiper class="swiper" indicator-dots="{{true}}"   indicator-color="rgb(247, 247, 247,1)"     indicator-active-color="#1bb7b5" bindchange='onChange' bindtransition='alter' bindanimationfinish='finish' current="{{current}}"><swiper-item class="swiper-item" wx:for="{{imgList}}" data-index="index" wx:key="index" catchtouchmove="{{amplification>1?'slideshow' : ''}}"> <movable-area class="moswiper1" scale-area><movable-view class="moswiper2" direction="all" out-of-bounds damping="999" scale scale-min="1" scale-max="4" scale="{{!isstop}}" scale-value="{{suofang}}" bindscale="movableScale" bindchange="slideChange"><view class="swiper-view" catchtap="nothing"><image mode="widthFix" src="{{item}}"></image></view></movable-view></movable-area>    </swiper-item></swiper></match-media>
<match-media orientation="landscape" bindtap="close" class="preview-img-mask" wx:if="{{imgList!=0}}"><swiper class="swiper1" indicator-dots="{{true}}"   indicator-color="rgb(247, 247, 247,1)"    indicator-active-color="#1bb7b5" bindtransition='onChange'><swiper-item class="swiper-item1" wx:for="{{imgList}}" data-index="index" wx:key="index"><view class="swiper-view1" catchtap="nothing"><image show-menu-by-longpress src="{{item}}"></image></view></swiper-item></swiper>
</match-media>

// component/previewImg/previewImg.js
const app = getApp();
Component({/*** 组件的属性列表*/properties: {imgList:{value:[],type:Array},},/*** 组件的初始数据*/data: {swiperIndex: 0,  // 第一次加载默认第一张图片选中amplification:1 ,  //放大倍数iscurrent:0  ,     //当前在哪一张isdx:'',          //记录缩放xisdy:'',          //记录缩放yisstop:false,        //禁止缩放current:0 ,       //哪一个suofang:1,       //缩放倍数x_axis:0,     //x轴坐标},/*** 组件的方法列表*/methods: {close(){// debuggerthis.triggerEvent("close")},onChange(e){                       //如果不加这个方法那放大和滑动屏幕如果同时触发了let current = e.detail.current      //那因为此时amplification可能大于设定值将不可滑动console.log('current',e.detail);this.setData({current:current})if (current != this.data.iscurrent) {// console.log('只要图片改变了,就可以滑动~~~~');this.setData({amplification:1,})}this.setData({iscurrent:current})},alter(e){  //swiper位移事件let [dx, dy] = [e.detail.dx,e.detail.dy];this.setData({isdx:dx,isdy:dy})//这个>10是因为手指触碰时会被轻微的滑动影响到而造成不能缩放if (this.data.isdx>10 || this.data.isdy>10) {  // console.log('说明有位移操作，此时禁止缩放~~');this.setData({isstop:true})}else{//否则允许缩放this.setData({isstop:false})}},finish(e){  //轮播图移动完毕事件console.log(e);this.setData({isdx:0,      //xy每一次跳转完毕赋值0  给下面重新判断用，并且允许新页面缩放isdy:0,isstop:false,    //允许缩放suofang:1,       //缩放回1倍})},nothing(e){console.log(e);   },    movableScale(e){//放大事件，只要图片放大就给轮播图禁止了// console.log('放大倍数=====>',e.detail);this.setData(({amplification:e.detail.scale,}))},//如果x越来越小就是往右，越来越大就是往左移动slideChange: app.throttle(function(e){if (this.data.amplification<1.1) {console.log('没放大不走拖动换页那一套~');}else{console.log('movable-view滑动事件====>',e.detail);let xzhi = this.data.x_axisconsole.log('之前的x轴位置====>',xzhi);let x = e.detail.x       //当前的x坐标轴-610 与 以前的x坐标轴对比-609let xdang1 = x-5let xdang2 = x+5if (x > this.data.x_axis) {   //如果x轴坐标大于上次记录的this.setData({x_axis:xdang2})console.log('图片是左移');if (e.detail.source == "out-of-bounds" || e.detail.source == "touch-out-of-bounds") {console.log('触碰到左左左边界了=====>');if (this.data.current>0) {     this.setData({// amplification:1,current:this.data.current-1})}else{this.setData({current:0})}}}else{  //x < this.data.x_axisthis.setData({x_axis:xdang1})console.log('图片右移右移~~');if (e.detail.source == "out-of-bounds" || e.detail.source == "touch-out-of-bounds") {console.log('触碰到右边界了=====>');if (this.data.current < this.properties.imgList.length-1) {this.setData({current:this.data.current+1})}else{this.setData({current:this.data.current})}}}}},800),}
})

app.js中一个节流方法，不加的话触碰到边界的时候出来100个触碰结果

throttle(fn, interval) {  //节流var enterTime = 0;//触发的时间var gapTime = interval || 300 ;//间隔时间，如果interval不传，则默认300msreturn function() {var context = this;var backTime = new Date();//第一次函数return即触发的时间if (backTime - enterTime > gapTime) {fn.call(context,arguments[0]);enterTime = backTime;//赋值给第一次触发的时间，这样就保存了第二次触发的时间}};},

微信小程序用swiper 和 movable-view实现wx.previewImage功能相关推荐

微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序利用swiper+scroll-view实现Tab切换
微信小程序利用swiper+scroll-view实现Tab切换先放一张效果图需要实现的功能逻辑: 1.当用户点击tab的时候,tab样式发生改变,并且下方对应的展示内容也发生改变. 2.当用户滑 ...
微信小程序设置swiper圆角在ios上失效解决
今天在给轮播图添加圆角的时候,发现在安卓机上是有圆角的,但是在苹果手机上圆角却失效了,后来翻阅了文档发现这是个bug.下面是两种解决方案:第一种:-webkit-backface-visibility ...
微信小程序：swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
微信小程序学习7：路由跳转 - wx.navigateTo() wx.redirectTo()...
微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo()- 文章目录微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo( ...
微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能解决方案 uni-app 微信原生代码在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮(￣﹏￣)╭⭐. 解决方案在导航 ...
虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码
简介: 虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码网盘下载地址: http://www.zijiepan5.xyz/hNiChK2xwgy0 图片:
2022虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码
简介: 虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码网盘下载地址:https://qumaw.lanzoul.com/ioRp700i1fgb

微信小程序用swiper 和 movable-view实现wx.previewImage功能

微信小程序用swiper 和 movable-view实现wx.previewImage功能相关推荐

最新文章

热门文章