小程序自定义swiper小圆点样式
文章描述：
小程序如何自定义美化小圆点样式呢？
wxml
<!--banner-->
<view class="banner">
<swiper class="swiper swiper-wrap" autoplay="true" interval="4000" current="{{currentSwiper}}" bindchange="swiperChange">
<block>
<swiper-item><image src="/images/banner1.jpg" mode="widthFix"></image></swiper-item>
<swiper-item><image src="/images/banner2.jpg" mode="widthFix"></image></swiper-item>
</block>
</swiper>
<view class="dots">
<block>
<view class="dot{{0 == currentSwiper ? ' active' : ''}}"></view>
<view class="dot{{1 == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>wxss
/* banner */
.banner{ width: 100%; height: 500rpx;position: relative; }
.banner .swiper{ width: 100%; height: 100%; }
.banner .swiper image{ width: 100%; }
/* swiper dots */
.dots{ position: relative; display: flex; flex-direction: row; margin-bottom: 32rpx; justify-content: center; top: -40rpx; }
/* 未选中的小圆点 */
.dot{ width: 6rpx; height: 6rpx; border-radius: 50%; border: 1px solid #f7eae3; background-color: #eee2da; margin: 0 10rpx; }
/* 选中的小圆点 */
.active{ width: 45rpx; height: 6rpx; border-radius: 5rpx 5rpx 5rpx 5rpx; background-color: #fff; border: 1px solid #fff; }js
Page({
data: {
imgSource: ['url0','url1','url2'],
currentSwiper: 0,
},
swiperChange (e){
this.setData({
currentSwiper: e.detail.current
})
}
})
发布时间：2021/06/08
发表评论