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

小咪咪 2023-06-26 10:57 33阅读 0赞

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

![2019123116553370.gif][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

### **点击左右按钮切换图片。** ###

在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;
      }

**代码展示：**

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;
    }

[2019123116553370.gif]: https://img-blog.csdnimg.cn/2019123116553370.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019123116560516.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70