小程序 轮播(做小圆点轮播功能)

轮播

		<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%; 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;
		  100%;
		 top: -14px;
		 display: flex;
		 justify-content: center;
	 }
	 .indicator .item{
		height: 5px;
		 5px;
		border: #FFFFFF 0.5px solid;
		border-radius: 50%;
		margin-right: 5px;

 

//methods
imgPreview(item:any){ uni.previewImage({ urls:[item] }) },
原文地址:https://www.cnblogs.com/lsongyang/p/13540844.html