进度条滑动轮播图之移动端

 <!-- 轮播图 -->
    <view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" @change="swiperChange"  :autoplay="true" interval="5000" duration="500" previous-margin="25px" next-margin="25px">
					<swiper-item v-for="(item, index) in swiperList" :key="index"><image :src="item.img" mode="aspectFill" :class="currentSwiper !== index ?'swiper-item-side':''" lazy-load="true" ></image></swiper-item>
				</swiper>
				<view class="indicator">
          <view v-for="(item, index) in swiperList" :key="index" :class="currentSwiper >= index ? 'on' : 'dots'" :style="'width: ' + (currentSwiper >= index ? 100 / swiperList.length + '%' : '' )"></view>
        </view>
			</view>
		</view>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
    currentSwiper: 0,
    swiperList: [{
    
    
					img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=339984553,3509384023&fm=26&gp=0.jpg'
				}, {
    
    
					img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1786439814,215205363&fm=26&gp=0.jpg'
				}, {
    
    
					img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600399666309&di=3670afbef52571b71b98f4562043498e&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F57ea3c2d57be6.jpg'
				}],
	}
	},
	methods:{
    
    
	 swiperChange(e) {
    
    
      this.setData({
    
    
        currentSwiper: e.detail.current,
      });
    }
	}
}
</script>

.swiper {
    
    
	  width: 100%;
	  margin-top: 10upx;
	  display: flex;
	  justify-content: center;
	}
	
	.swiper-box {
    
    
	  width: 100%;
	  height: 45vw;
	  overflow: hidden;
	  /* border-radius: 15upx; */
	  /* box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2); */
	  position: relative;
	  z-index: 1;
	}
	
	.swiper-box swiper {
    
    
	  width: 100%;
	  height: 45vw;
	}
	.swiper-box swiper swiper-item{
    
    
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.swiper-box swiper swiper-item image {
    
    
	  width: 95%;
	  height: 45vw;
	  margin: 0 auto;
	  display: block;
	  border-radius: 10px;
	  transition: height .3s;
	}
	.swiper-item-side {
    
    
	  width: 95%;
	  height: 40vw!important;
	  transition: height .3s;
	}
	.indicator {
    
    
	  position: absolute;
	  bottom: 20upx;
	  left: 20upx;
	  background-color: rgba(255, 255, 255, 0.4);
	  width: 150upx;
	  height: 5upx;
	  border-radius: 3upx;
	  overflow: hidden;
	  display: flex;
	}
	
	.dots {
    
    
	  width: 0upx;
	  background-color: rgba(255, 255, 255, 1);
	  transition: all 0.3s ease-out;
	}
	
	.on {
    
    
	  width: 30%;
	  background-color: rgba(255, 255, 255, 1);
	  transition: all 0.3s ease-out;
	}