微信小程序swiper横向滚动

效果如图:

微信小程序swiper横向滚动_第1张图片

1、wxml

display-multiple-items:同时显示的滑块数量

circular:是否采用衔接滑动

previous-margin:前边距,用于露出前一项的一小部分

next-margin: 后边距,用于露出后一项的一小部分


    
      
        
          
        
      
    
  

2、wxss

.swiper-view{
  height:  180rpx;
  background: #ccc;
  margin-bottom: 20rpx;
}
.swiper-view .swiper-swiper{
  width: 100%;
  height: 100%;
}
.swiper-view .swiper-item{
  height: 100%;
  margin: 0 10rpx;
}
.swiper-view .swiper-item .swiper-item-img{
  width: 100%;
  height: 100%;
}

3、js

data: {
    imgArr: [
      { src: '../../img/m1.jpg'},
      { src: '../../img/m2.jpg' },
      { src: '../../img/m3.jpg' },
      { src: '../../img/m4.jpg' },
      { src: '../../img/m5.jpg' },
      { src: '../../img/m6.jpg' },
    ]
  },

 

你可能感兴趣的:(微信)