<view class="swiper">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
swiper 样式
.wx-swiper-dots
: 指示点容器样式.wx-swiper-dots-horizontal
: 水平滑动的指示点容器样式,其在.wx-swiper-dots
内。.wx-swiper-dot
:指示点样式.wx-swiper-dot-active
: 当前指示点样式
指示点颜色
默认指示点颜色
改变指示点颜色
.swiper .wx-swiper-dot {
background-color: rgba(255,255,255,0.7);
}
.swiper .wx-swiper-dot-active {
background-color:#ff4e5b;
}
指示点形状
默认指示点形状
改变指示点形状
.swiper .wx-swiper-dots-horizontal .wx-swiper-dot {
width: 45rpx;
height: 8rpx;
border-radius: 5rpx;
}
指示点位置
默认指示点位置贴近底部
改变指示点位置
.swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
position: absolute;
bottom: 40rpx;
}
.wx-swiper-dots.wx-swiper-dots-horizontal
,注意中间,没有空格
或者-
.swiper .wx-swiper-dots.wx-swiper-dots-horizontal { margin-bottom: 40rpx; }
.wx-swiper-dots.wx-swiper-dots-horizontal
,注意中间,没有空格
自定义swiper点的样式图片样式
<!-- 轮播图 -->
<view class="sy_yfgg">
<swiper indicator-dots="true" autoplay="true" interval="2000">
<swiper-item>
<image class="image" src="../../images/home_topback.png" mode="aspectFill"></image>
</swiper-item>
<swiper-item>
<image class="image" src="../../images/home_topback.png" mode="aspectFill"></image>
</swiper-item>
<swiper-item>
<image class="image" src="../../images/home_topback.png" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
/* 设置swiper组件的宽高 */
.sy_yfgg swiper{width: 95%;height: 110rpx; margin: 15rpx auto; border-radius: 20rpx; overflow: hidden;}
/* 设置swiper组件里面图片的宽高 */
.sy_yfgg swiper image{width: 100%; height: 110rpx;border-radius: 20rpx;}
/* 修改dot形状 */
.sy_yfgg .wx-swiper-dots .wx-swiper-dot{width:8rpx;height:8rpx;border-radius:4rpx;background-color:#d8d9dd}
/* 修改dot之间的间距 */
.sy_yfgg .wx-swiper-dots .wx-swiper-dot:nth-of-type(n+2){margin-left:0rpx}
/* 修改选中dot形状 */
.sy_yfgg .wx-swiper-dots .wx-swiper-dot.wx-swiper-dot-active{width:24rpx;height:8rpx;border-radius:4rpx;background-color:#fff}
/* 调成dots的位置 */
.sy_yfgg .wx-swiper-dots.wx-swiper-dots-horizontal{bottom:10rpx;text-align:center}