微信小程序自定义轮播图指示点样式

萧寂173

于 2025-02-26 15:37:43 发布

阅读量1.2k

点赞数 5

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/weixin_68658847/article/details/145880395

版权

微信小程序专栏收录该内容

30 篇文章

订阅专栏

<swiper class="swiperClass" indicator-dots="true" autoplay="true">
    <block wx:for="{{5}}" wx:key="*this">
        <swiper-item>
            <view class="swiper-item">{{item}}</view>
        </swiper-item>
    </block>
</swiper>

.swiperClass{
    width: 705rpx;
    position: absolute;
    top: 101rpx;
    height: 501rpx;
    left: calc(50% - 352.5rpx);
}
.swiperClass .wx-swiper-dots.wx-swiper-dots-horizontal{
    margin-bottom :  2rpx;
}
.swiperClass .wx-swiper-dot{
   width : 120rpx;
   display : inline-flex;
   height :  10rpx; 
   margin-left :  20rpx;
   justify-content :space-between;
}
.swiperClass .wx-swiper-dot::before{
   content :  '';
   flex-grow:  1;  
   background : rgba( 255 , 255 , 255 , 0.8 );
   border-radius:  8rpx
}
.swiperClass .wx-swiper-dot-active::before{
   background :rgba(244 ,0 ,0 ,0.8 );    
}