uniapp实现轮播swiper中间大两头小

html

  

   

    

     

    
    

     

      <swiper class="swiper-block" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular='true' previous-margin='90rpx' next-margin='90rpx' current='0' @change="swiperChange">
     
    
   

    

     

    
    

     
				<swiper-item class="swiper-item" v-for="(item,index) in swiperImgUrls">
     
    
   

    

     

    
    

     
					<image :src="item" :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill"></image>
     
    
   

    

     

    
    

     
				</swiper-item>
     
    
   

    

     

    
    

     

      </swiper>
     
    
  
 

js

  

   

    

     

    
    

     
	data() {
     
    
   

    

     

    
    

     
			return {
     
    
   

    

     

    
    

     
				swiperdata:[],
     
    
   

    

     

    
    

     
				swiperImgUrls: [
     
    
   

    

     

    
    

     
				      'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2797486824,1669366989&fm=26&gp=0.jpg',
     
    
   

    

     

    
    

     
				      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606209804674&di=43e85524ef76a0511e2a6003ae1cd56a&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F41%2F37%2F01300000169980121904374291568.jpg',
     
    
   

    

     

    
    

     
				      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606209804674&di=01613472182e0cd4ac6eaaaf9ba18eea&imgtype=0&src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2F372edfeb74c3119b666237bd4af92be5.jpg'
     
    
   

    

     

    
    

     

      				    ],
     
    
   

    

     

    
    

     
				currentIndex:0
     
    
   

    

     

    
    

     

      			}
     
    
   

    

     

    
    

     

      		},
     
    
   

    

     

    
    

     
	method:{
     
    
   

    

     

    
    

     
		swiperChange(event) {
     
    
   

    

     

    
    

     
				console.log(event)
     
    
   

    

     

    
    

     
				this.currentIndex = event.detail.current
     
    
   

    

     

    
    

     

      			}
     
    
   

    

     

    
    

     

      	}
     
    
  
 

  
 
 

css

  

   

    

     

    
    

     
		.swiper-block {
     
    
   

    

     

    
    

     
		  height: 300rpx;
     
    
   

    

     

    
    

     
		  width: 100%;
     
    
   

    

     

    
    

     

      		  }
     
    
   

    

     

    
    

     
		  
     
    
   

    

     

    
    

     
		  .swiper-item {
     
    
   

    

     

    
    

     
		  display: flex;
     
    
   

    

     

    
    

     
		  flex-direction: column;
     
    
   

    

     

    
    

     
		  justify-content: center;
     
    
   

    

     

    
    

     
		  align-items: flex-start;
     
    
   

    

     

    
    

     
		  overflow: unset;
     
    
   

    

     

    
    

     

      		  }
     
    
   

    

     

    
    

     
		  
     
    
   

    

     

    
    

     
		  .slide-image {
     
    
   

    

     

    
    

     
		  height: 250rpx;
     
    
   

    

     

    
    

     
		  width: 520rpx;
     
    
   

    

     

    
    

     
		  border-radius: 9rpx;
     
    
   

    

     

    
    

     
		  box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
     
    
   

    

     

    
    

     
		  margin: 0rpx 30rpx;
     
    
   

    

     

    
    

     
		  z-index: 1;
     
    
   

    

     

    
    

     

      		  }
     
    
   

    

     

    
    

     
		  
     
    
   

    

     

    
    

     
		  .active {
     
    
   

    

     

    
    

     
		  transform: scale(1.14);
     
    
   

    

     

    
    

     
		  transition: all 0.2s ease-in 0s;
     
    
   

    

     

    
    

     
		  z-index: 20;
     
    
   

    

     

    
    

     

      		  }
     
    
  
 

  
 
 

文章来源: zzzili.blog.csdn.net，作者：清雨小竹，版权归原作者所有，如需转载，请联系作者。

原文链接：zzzili.blog.csdn.net/article/details/117355768