微信小程序中实现左右滑动图片翻页

页面代码

<swiper

  class="container"

  indicator-dots="{{indicatordots}}"

  autoplay="{{autoplay}}"

  interval="{{interval}}"

  duration="{{duration}}"

  bindchange='onSlideChange'

  >

    <block wx:for="{{imgList}}" wx:key="index">

      <swiper-item class="vol-swiper-item">

        <view class="vol-card">

          <image class="vol-picture" src="{{item}}" mode="aspectFill"></image>

        </view>

      </swiper-item>

    </block>

  </swiper>

js代码

data: {

    hidden: false,

    imgList: [],

    autoplay: false,

    indicatordots: false,

    duration: 500

  },

  onLoad: function () {

    var that = this;

    var videoUrl = "请求的接口地址";

    Api.http(videoUrl, (res) => {

      that.setData({

        hidden: true,

        imgList: res,

      })

    })

  },

  onSlideChange: function (event) {

    var postId = event.detail.current;

    console.log(postId);

  },

样式：

.container {

  height: 100vh;

  padding-top: 0px;

}

.vol-swiper-item {

  box-sizing: border-box;

}

.vol-card {

  /*parent layout  and  this inner padding*/

  padding: 20rpx;

  height: 965rpx;

  background: #fff;

}

.vol-swiper {

  height: 100%;

}

.vol-picture {

  width: 100%;

}

其中:

indicator-dots：控制底下显示的圆点。

autoplay：控制自动播放。

interval：如果开启自动播放，控制切换时间间隔。

duration：滑动动画时长。

bindchange：current 改变时会触发 change 事件，event.detail = {current: current, source: source}

详细参考：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html