⼩程序⾃定义轮播图indicator-dots
⾸先，在 indicator-dots 在 swiper 组件⾥默认为false。所以⾃定义的时候并不需要设置它。
html5轮播图代码效果图
⼀开始我想⽤ cover-view 来实现他的展⽰以及⼀些样式，但是 cover-view 定位后，在页⾯滚动的时候会出现bug。然后发现 view 就可以，，，，浪费时间
<view class="swiper">
<view class="indicatorDots">
<block wx:for='{{swiper}}' wx:key='index'>
<view class="{{current==index?'swiper-dot':'swiper-dots'}}"></view>
</block>
</view>
<swiper bindchange="swiperChange">
<block wx:for='{{swiper}}' wx:key='index'>
<swiper-item>
<image src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
</view>
.swiper{
height: 350rpx;
position: relative;
}
.swiper  .indicatorDots{
position: absolute;
height: 8rpx;
z-index: 99;
bottom: 50rpx;
display: flex;
justify-content: space-around;
left: 50%;
transform: translateX(-50%);
}
.swiper  .indicatorDots view{
height: 8rpx;
margin: 0 8rpx;
transition: .5s;
}
.swiper .swiper-dots{
width: 26rpx;
height: 8rxp;
background-color: #e1dfdf;
border-radius: 8rpx;
}
swiper .swiper-dot{
width: 40rpx;
height: 8rxp;
border-radius: 8rpx;
background-color: #b5b5b5;
}
data:{
swiper:[url1,url2,url3] ,
current:0,
}
swiperChange:function(e){
const current=e.detail.current;
this.setData({
current
})
}
使⽤ bindchange 获取当前轮播图的节点 current 。通过判断 current 于 index 是否相等切换样式即可

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。