小程序 轮播(做小圆点轮播功能)
轮播
<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]
})
},