这篇文章主要介绍了微信小程序小视频源码实现图片滑动效果,结合实例形式分析了微信小程序小视频源码基于js组件的图片切换效果相关实现技巧与操作注意事项,，通过上下滑动来切换图片，需要的朋友可以参考下：
在wxml图层，首先在image图片上添加三个事件，bindtouchstart=”touchStart”（触摸开始事件），bindtouchmove=”touchMove”（触摸移动事件），bindtouchend=”touchEnd”（触摸结束事件）。
<image bindtouchstart="touchStart"
bindtouchmove="touchMove" bindtouchend="touchEnd" class="pause" src="{{image}}"></image>
接下来就是小视频源码处理逻辑，在js里面。
该效果基于小程序的组件 scroll-view 开发的，利用bindscroll事件加载回调函数。
回调事件原理：
通过切换宽度和每个item的宽度从而获取当前切换的item是第几位，然后给对应的item加上选中class，其他的则去除选中class。
在小视频源码开发时首先要在data里面定义我们需要的一些值
data: {
image：’图片的地址’
touchDotY: 0, //触摸时的原点的高度
touchMoveY: 0,//停止触摸后的原点的高度
ismove:0, //是否滑动了
},
// 触摸开始事件
touchStart: function (e) {
var touchDotY = e.touches[0].pageY; //触摸时的高度
this.setData({
touchDotY: touchDotY, //把刚开始触摸时的高度记录下来
})
},
//触摸移动的事件
touchMove: function (e) {
var touchMoveY = e.touches[0].pageY; //触摸移动时的高度
this.setData({
touchMoveY: touchMoveY, //把触摸移动后的高度记录下来
ismove:1 //证明移动了
})
},
// 触摸结束事件
touchEnd: function (e) {
var _that=this;
var touchDotY = _that.data.touchDotY; //触摸时的原点的高度
var touchMoveY = _that.data.touchMoveY//停止触摸后的原点的高度
if (touchMoveY == 0 || _that.data.ismove==0){ //首先判断有没
小视频源码有移动，如果没有则停止运行
return 'fail';
}
if (touchDotY - touchMoveY>50){ //判断原来的位置高度要大于
小视频源码移动后的表示向上滑
_that.data.setData({ //给图片重新赋值然后图片就自动替换了
image:’新图片的地址’
})
return 'fail';
}
if (touchMoveY-touchDotY >50 ) { //判断原来的位置高度要小于
小视频源码移动后的表示向下滑
_that.data.setData({ //给图片重新赋值然后图片就自动替换了
image:’新图片的地址’
})
return 'fail';
},
这样就完美的实现了小程序小视频源码上下滑动切换图片的功能了。有时候一些酷炫的效果其实实现起来非常简单，建议开发前先理清实现思路，虽然整个文章言简意赅，能看懂就自然懂，乐在分享。
注意：
微信小程序小视频源码中替换图片的逻辑一定要写在触摸结束后的事件里面，不要写在触摸移动事件里面，否则会替换多次图片。
声明：本篇文章为小编原创文章，转载请注明出处及作者。
