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

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 );    
}
相关推荐
流口水的兔子13 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记20 分钟前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~183399481212 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero4 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠5 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu15 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域1 天前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域1 天前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔1 天前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun1 天前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序