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

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 );    
}
相关推荐
努力成为包租婆9 小时前
微信小程序 van-dropdown-menu
微信·微信小程序·小程序
thinkQuadratic10 小时前
微信小程序动态设置高度,添加动画等常用操作
微信小程序·小程序
中科三方11 小时前
APP和小程序需要注册域名吗?(国科云)
小程序·apache
幽络源小助理13 小时前
微信小程序文章管理系统开发实现
java·微信小程序·springboot
10年前端老司机15 小时前
微信小程序模板语法和事件
前端·javascript·微信小程序
上趣工作室16 小时前
微信小程序开发1------微信小程序中的消息提示框总结
微信小程序·小程序
三天不学习17 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
韩仔搭建18 小时前
美乐迪电玩大厅加载机制与 RoomList 配置结构分析
游戏·小程序·开源·lua
WKK_20 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
老李不敲代码2 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php