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

html 复制代码
<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>
css 复制代码
.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 );    
}
相关推荐
汤姆yu8 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域15 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域18 小时前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔18 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun1 天前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54581 天前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ2 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序