1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 小程序自定义swiper的指示点样式及颜色

小程序自定义swiper的指示点样式及颜色

时间:2023-02-20 21:05:09

相关推荐

小程序自定义swiper的指示点样式及颜色

原生的轮播图的样式不是很好看,需要把轮播

图居中、圆边角、指示点颜色更改、指示点样式更改

下图是样式不好看的组件

要修改成这样::

wxml:

<swiper class="bd" indicator-dots="{{true}}" indicator-active-color="#ff8f00" autoplay="{{true}}" interval ="5000" duration="500"><swiper-item><view class='lbtp'><image src='/images/bannar/lbt1.jpg'></image></view></swiper-item><swiper-item><view class='lbtp'><image src='/images/bannar/lbt2.jpg'></image></view></swiper-item></swiper>

js:

/*轮播图指示点*/.bd .wx-swiper-dots.wx-swiper-dots-horizontal{margin-bottom: 2rpx;}.bd .wx-swiper-dot{width:40rpx;/*点的长*/display: inline-flex;height: 10rpx; /*点的高*/margin-left: 5rpx; /*两个点的距离*/justify-content:space-between;}.bd .wx-swiper-dot::before{content: '';flex-grow: 1; background : #d7d7d7; /*点的未选中颜色*/border-radius: 8rpx}.bd .wx-swiper-dot-active::before{background:#ff8f00; /*点的选中颜色*/}

这样就可以有效果了,js里面有关键的注释,大家可以做修改。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。