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

页面代码

class="container"

indicator-dots="{{indicatordots}}"

autoplay="{{autoplay}}"

interval="{{interval}}"

duration="{{duration}}"

bindchange='onSlideChange'

>

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 {

100%;

}

其中:

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

autoplay：控制自动播放。

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

duration：滑动动画时长。

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