微信小程序之轮播图swiper组件自定义指示点样式
·
定义一个轮播图 swiper 组件：
// swiper.wxml
<swiper indicator-dots="true">
<block wx:for="{{imgURL}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>
修改轮播图 swiper 组件的样式（注意对应的class类名）
// swiper.wxss
/* 默认指示点的样式 */
.swiper .wx-swiper-dot {
width: 15rpx;
height: 15rpx;
background: #eee;
border-radius: 50%;
}
/* 选中指示点的样式 */
.swiper .wx-swiper-dot.wx-swiper-dot-active {
width: 30rpx;
height: 15rpx;
background: #2782D7;
border-radius: 15rpx;
}
只要在上面对应的两个类样式中进行修改，就可以实现自定义 swiper 组件的指示点样式。
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
4
0- 0
已为社区贡献9条内容
所有评论(0)