修改微信小程序轮播图组件自定义指示器样式

明天不上班9

已于 2024-06-20 10:54:14 修改

阅读量646

点赞数 7

文章标签：微信小程序小程序 css

于 2024-06-20 10:53:51 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42418196/article/details/139826019

版权

1.轮播图组件使用

<!-- 轮播图 -->
    <swiper class="swiper top-swiper" circular autoplay="{{true}}" interval="4000" duration="1000" indicator-dots="{{true}}" indicator-color="#FFFFFF">
        <block wx:for="{{swiperList}}" wx:key="index">
          <swiper-item>
            <image class="swiper-item"  src="{{item.base64Img}}" data-url="{{item.redirectLink}}" bindtap="gotoAdDetail"/>
          </swiper-item>
        </block>
    </swiper>

2. 修改指示器样式

指示器容器类命wx-swiper-dots,单个指示器类命wx-swiper-dot，当前活跃类名wx-swiper-dot-active

/* 修改轮播图指示器样式 */
swiper .wx-swiper-dot{
  height: 8rpx;
  width: 8rpx;
  border-radius: 50%;
}
swiper .wx-swiper-dot-active{
  height: 8rpx;
  width: 28rpx;
  border-radius: 2px;
  background: rgb(255, 255, 255);
}