微信小程序中的 swiper 实现自定义左右按钮切换，且在swiper中禁止touch切换页面

效果图：[ qq 录制有点儿问题，凑合着看下效果图]

点击左右按钮切换图片。

在swiper中禁止touch切换页面：  在swiper-item 里面添加事件catchtouchmove

<swiper-item catchtouchmove="stopTouchMove">
   <image src="{{item}}" mode="widthFix" bindload="imgLoad" bindtap="changeImg"></image>
</swiper-item>
 
// 禁止手动滑动触发 swiper
  stopTouchMove(){
    return false;
  }

代码展示：

<image id="swiperImg"></image>
<swiper wx:if="{{swiper.currentImgW}} && {{swiper.viewHeight}}" style="height:{{swiper.viewHeight}}px;width:{{swiper.currentImgW}}px" current="{{swiper.current}}">
      <block wx:for="{{swiper.paperList}}" wx:key="index">
        <swiper-item catchtouchmove="stopTouchMove">
          <image src="{{item}}" mode="widthFix" bindload="imgLoad" bindtap="changeImg"></image>
        </swiper-item>
      </block>
</swiper>

var that;
Page({
  data: {
    swiper:{
      paperList: [
        'http://img4.imgtn.bdimg.com/it/u=2229864841,4232235061&fm=26&gp=0.jpg',
        'http://g.hiphotos.baidu.com/zhidao/pic/item/c83d70cf3bc79f3d6e7bf85db8a1cd11738b29c0.jpg',
        'http://big5.wallcoo.com/photograph/summer_feeling/images/%5Bwallcoo.com%5D_summer_feeling_234217.jpg',
        'http://big5.wallcoo.com/nature/Hokkaido_summer_field/images/Hokkaido_summer_field_picture_13652941_3540148.jpg'
      ],
      currentImgW: '',  // 页面上当前swiper里面image的宽度
      viewHeight: '',   // 页面上swiper里面的image的高度
      current:0
    }
  },
  onShow: function () {
    that = this;
    // 获取页面上当前swiper里面图片的宽度
    let query = wx.createSelectorQuery();
    var swiper = that.data.swiper;
    query.select('#swiperImg').boundingClientRect(function (rect) {
      console.log('rect', rect.width);
      swiper.currentImgW = rect.width
      that.setData({
        swiper
      })
    }).exec();
  },

  // 图片加载完触发
  imgLoad(e){
    that = this;
    var imgW = e.detail.width,
        imgH = e.detail.height,
        ratio = imgW / imgH;
    let swiper = that.data.swiper;
    swiper.viewHeight = parseInt(swiper.currentImgW / ratio)
    that.setData({
      swiper
    })
    console.log(swiper.viewHeight);
  },
  // 改变时触发
  bindchange(e){
    console.log(e);
  },
  // 上一页
  prevImg(){
    that = this;
    var swiper = this.data.swiper;
    var current = swiper.current;
    swiper.current = current > 0 ? current - 1 : swiper.paperList.length - 1;
    that.setData({
      swiper
    })
  },
  // 下一页
  nextImg(){
    that = this;
    var swiper = this.data.swiper;
    var current = swiper.current;
    swiper.current = current < (swiper.paperList.length - 1) ? current + 1 : 0;
    that.setData({
      swiper
    })
  },
  // 禁止手动滑动触发 swiper
  stopTouchMove(){
    return false;
  }
})

.content{
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding-top: 12rpx;
}
#swiperImg{
  position: absolute;
  width: 700rpx;
  left: 50%;
  transform: translate(-50%);
}
.bottom_btn_part{
  width: 100%;
  position: absolute;
  left: 0;
  /* bottom: 10rpx; */
}
.bottom_btn_part button{
  width: 180rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #fff;
  border-radius: 16rpx;
  background: rgba(0,0,0,.5);
  position: absolute;
  left: 50%;
  bottom: 15rpx;
  transform: translate(-50%);
}
.left_arrow_part{
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(0,0,0,.5);
  position: absolute;
  left: 10rpx;
  bottom: 15rpx;
  border-radius: 16rpx;
  text-align: center;
}
.left_arrow_part image{
  width: 16rpx;
  height: 26rpx;
  margin-top: 28rpx;
}
.right_arrow_part{
  left:initial;
  right: 10rpx;
}
.box{
  box-sizing: border-box;
  height: 60px;
  border: 2px dashed #fed23d;
  position: absolute;
  top: 0;
  left: 0;
}
.box .left_icon_txt{
  width: 112rpx;
  height: 44rpx;
  line-height: 44rpx;
  position: absolute;
  left: 0;
  top: -55rpx;
  z-index: 5;
}
.box .left_icon_txt image{
  width: 112rpx;
  height: 50rpx;
}
.box .left_icon_txt view{
  position: absolute;
  right: 0;
  font-size: 24rpx;
  padding-right: 10rpx;
  color: #333333;
}
.box .left_icon_txt_gray{
  line-height: 44rpx;
  position: absolute;
  left: 0;
  top: -55rpx;
  z-index: 5;
  font-size: 24rpx;
}
.box .left_icon_txt_gray view{
  background: #999999;
  color: #fff;
  padding:0 15rpx;
}
image{
  display: block;
  margin: 0 auto;
}
swiper{
  margin:0 auto;
}
swiper image{
  width: 100%;
  height: auto;
}