微信小程序swiper横向滚动

最新推荐文章于 2024-01-10 10:50:09 发布

原创最新推荐文章于 2024-01-10 10:50:09 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

微信专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了如何使用WeChat小程序的swiper组件创建轮播图效果，包括wxml、wxss和js代码示例，展示了如何设置同时显示的滑块数量、衔接滑动、前后边距等属性。

效果如图：

1、wxml

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

circular:是否采用衔接滑动

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

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

<view class='swiper-view'>
    <swiper class='swiper-swiper' display-multiple-items="{{5}}" circular="true" previous-margin="10rpx;" next-margin="10rpx;">
      <swiper-item wx:for="{{imgArr}}">
        <view class="swiper-item">
          <image class='swiper-item-img' src='{{item.src}}' mode="aspectFit"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>

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' },
    ]
  },