小程式修改輪播圖的小點樣式
阿新 • • 發佈:2018-12-20
wxml:
<view class='swiper-box'> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" /> </swiper-item> </block> </swiper> <view class="dots"> <block wx:for="{{imgUrls}}" wx:key="unique"> <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view> </block> </view> </view>
css:
swiper{ width: 100%; } .swiper-box{ position: relative; width: 100%; } .dots{ position: absolute; left: 0; right: 0; bottom: 20rpx; display: flex; justify-content: center; } .dots .dot{ margin: 0 8rpx; width: 14rpx; height: 14rpx; background: #fff; border-radius: 8rpx; transition: all .6s; } .dots .dot.active{ width: 24rpx; background: orchid; } swiper image { width: 100%; height: 100%; }
js
swiperChange(e) {
let current = e.detail.current;
// console.log(current, '輪播圖')
let that = this;
that.setData({
swiperCurrent: current,
})
},