小程序页面左右滑动效果

原链接：https://www.jianshu.com/p/b1d24867bbe7
wxml:

<!--slide.wxml-->
<view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
{
   {
   content}}
</view>

插曲：
微信小程序提供了页面的上下滚动的事件,在页面的js文件中,

page({
   
    onPageScroll(e) {
   
        console.log(e.scrollTop)
    }
})  

但是不是滑动事件,滑动事件需要自己加在view上,

<view bindtouchstart='touchStart' bindtouchend="touchEnd"></view>

如果不让滑动事件冒泡的话.将bind改为catch就好了

<view catchtouchstart='touchStart' catchtouchend="touchEnd"></view>

在js文件中添加绑定的事件处理函数,在touchStart中,将触摸开始获取到的x和y值存储到data里,例如touch.x和touch.y

touchStart(e) {
   
  // console.log(e)
  this.setData(