小程序 轮播(做小圆点轮播功能)
轮播
<swiper class="swiper" :style="{height:750*194/375+'rpx !important'}" circular="true" :autoplay="autoplay" :interval="interval" :duration="duration" :current="tabTopSwpIndex" @change="topSwpChg">
<swiper-item v-for="(item,index) in common.album" :key="index" :style="{height:750*194/375+'rpx !important'}">
<view style="height: 100%;width: 100%;">
<myimage mode="aspectFill" :src="item" class="swiper-image" height="100%" with="100%"></myimage>
</view>
</swiper-item>
</swiper>
轮播小圆点
<view class="indicator"> <view class="item" v-for="(item,index) in common.album" :key="index" :style="{'background-color':index==tabTopSwpIndex?'white':'transparent'}"></view> </view>
css
/* */
.indicator{
position: absolute;
width: 100%;
top: -14px;
display: flex;
justify-content: center;
}
.indicator .item{
height: 5px;
width: 5px;
border: #FFFFFF 0.5px solid;
border-radius: 50%;
margin-right: 5px;
//methods
imgPreview(item:any){
uni.previewImage({
urls:[item]
})
},

浙公网安备 33010602011771号