html
viewswiperautoplay="auto"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"current="{{swiperCurrent}}"bindchange="swiperChange"blockwx:for="{{slider}}"wx:key="unique"swiper-itemimagesrc="{{item.picUrl}}"/image/swiper-item/block/swiperviewblockwx:for="{{slider}}"wx:key="unique"viewdata-i='{{index}}'bindtap='fn'/view/block/view/viewjs
constapp=getApp()Page({data:{slider:[{picUrl:'../../images/icon-swiper1.jpg'},{picUrl:'../../images/icon-swiper2.jpg'},{picUrl:'../../images/icon-swiper3.jpeg'},{picUrl:'../../images/icon-swiper4.jpg'},],windowHeight:"",windowWidth:"",swiperCurrent:0,autoplay:true,interval:5000,duration:500,windowWidth:wx.getSystemInfoSync().windowWidth},fn(e){this.setData({swiperCurrent:e.currentTarget.dataset.i})console.log(e)},swiperChange:function(e){//console.log(e)this.setData({swiperCurrent:e.detail.current})},})css
.swiper-container{position:relative;}.swiper-container.swiper{height:300rpx;}.swiper-container.swiper.img{width:100%;height:100%;}.swiper-container.dots{position:absolute;left:0;right:0;bottom:20rpx;display:flex;justify-content:center;}.swiper-container.dots.dot{margin:08rpx;width:14rpx;height:14rpx;background:#fff;border-radius:8rpx;transition:all.6s;}.swiper-container.dots.dot.active{width:24rpx;background:#41B883;}有帮助到大家的关注我
会一直更新小程序常用技术及新玩法。
喜欢上方小程序,需要源码的,添加博主微信私信小编.
