默认的swiper面板指示点都是小圆点黑灰的&＃xff0c;但这满足不了广大小伙伴需求&＃xff0c;比如其他颜色的&＃xff0c;椭圆形的&＃xff0c;方形的等等。。。。 首先当然是要禁用掉&＃xff08;直接删掉&＃xff09;swiper属性indicator-dots&＃xff0c;再用view组件模拟dots&＃xff0c;对应的代码如下&＃xff1a;
然后是wxss代码&＃xff1a;
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: 0 8rpx;width: 14rpx;height: 14rpx;background: #fff;border-radius: 8rpx;transition: all .6s;
}
.swiper-container .dots .dot.active{width: 24rpx;background: #f80;
}
再对swiper的
bindchange属性绑定对应的事件&＃xff1a;
Page({
data: {slider: [{picUrl: &＃39;../../images/T003R720x288M000000rVobR3xG73f.jpg&＃39;},{picUrl: &＃39;../../images/T003R720x288M000000j6Tax0WLWhD.jpg&＃39;},
{picUrl: &＃39;../../images/T003R720x288M000000a4LLK2VXxvj.jpg&＃39;},],swiperCurrent: 0,
},
swiperChange: function(e){this.setData({swiperCurrent: e.detail.current})
}
})
京公网安备 11010802041100号