写文章的小程序关于⼩程序⼩视频源码的上下滑动，切换图⽚的实现
这篇⽂章主要介绍了⼩程序⼩视频源码实现图⽚滑动效果，结合实例形式分析了⼩程序⼩视频源码基于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 = _uchDotY; //触摸时的原点的⾼度
var touchMoveY = _uchMoveY//停⽌触摸后的原点的⾼度
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';
},
这样就完美的实现了⼩程序⼩视频源码上下滑动切换图⽚的功能了。有时候⼀些酷炫的效果其实实现起来⾮常简单，建议开发前先理清实现思路，虽然整个⽂章⾔简意赅，能看懂就⾃然懂，乐在分享。
注意：
⼩程序⼩视频源码中替换图⽚的逻辑⼀定要写在触摸结束后的事件⾥⾯，不要写在触摸移动事件⾥⾯，否则会替换多次图⽚。
声明：本篇⽂章为⼩编原创⽂章，转载请注明出处及作者。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。