2020年4月22日

微信小程序 swiper 点颜色


 

1、小程序swiper装指示点的盒子
.swiper-box .wx-swiper-dots. wx-swiper-dots-horizontal
举个栗子:
其中v115-class-goods-scroll 是我自己给的swiper 的类名

.v115-class-goods-scroll .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: -10rpx;
margin-left: -30rpx;
}

2、指定小程序swiper指示点长什么样
.swiper-box .wx-swiper-dot
列如:

.v115-class-goods-scroll .wx-swiper-dot{
width:28rpx;
display: inline-flex;
height: 8rpx;
margin-left: 10rpx;
justify-content:space-between;
}

这时候 指示点的样式就变成了这种扁平的了
3、小程序swiper 未选中的指示点的颜色
.swiper-box .wx-swiper-dot::before
列:

.v115-class-goods-scroll .wx-swiper-dot::before{
content: '';
flex-grow: 1;
background: rgba(223,223,223,.5);
border-radius: 4rpx
}

4、小程序swiper 选中的指示点的颜色
.swiper-box .wx-swiper-dot-active::before

.v115-class-goods-scroll .wx-swiper-dot-active::before{
background:#DF2C3F;
}

我的全部代码:
css:

.v115-class-goods-scroll .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: -10rpx;
margin-left: -30rpx;
}
.v115-class-goods-scroll .wx-swiper-dot{
width:28rpx;
display: inline-flex;
height: 8rpx;
margin-left: 10rpx;
justify-content:space-between;
}
.v115-class-goods-scroll .wx-swiper-dot::before{
content: '';
flex-grow: 1;
background: rgba(223,223,223,.5);
border-radius: 4rpx
}
.v115-class-goods-scroll .wx-swiper-dot-active::before{
background:#DF2C3F;
}

wxml:

<swiper class='v115-class-goods-scroll'
indicator-active-color="#DF2C3F"
indicator-color="rgba(223,223,223,.5)" indicator-dots="{{true}}">
<swiper-item style="width: 700rpx;max-width: 700rpx;" class="ak-flexB v116-class-goods-swiperItem" wx:if="{{(idx + 1) % 3 == 0 }}"
wx:for="{{theFirst.items}}" wx:for-index="idx"
wx:key="index" wx:for-item="aGoods" >
<view class='v115-class-goods-cell'
wx:for="{{3}}" wx:key="sumIdx" wx:for-index="sumIdx"
bindtap='jumpTo' data-url='/pages/productDetail/productDetail?id={{theFirst.items[idx - sumIdx].id}}'>
<image src='{{theFirst.items[idx - sumIdx].thumb}}' mode='aspectFill' class='v115-class-goods-cell-img'></image>
<view class='v115-class-goods-cell-tit ak-ellipsis-2'>{{theFirst.items[idx - sumIdx].title}}</view>
<view class='ak-flexS v115-class-goods-cell-pic-box'>
<view class='red-color'>¥{{theFirst.items[idx - sumIdx].shop_price}}</view>
<view class='gray-color'>¥{{theFirst.items[idx - sumIdx].market_price}}</view>
</view>
</view>
</swiper-item>
</swiper>

 

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732