微信小程序开发--如何在swiper中显示两个item以及下一个item的部分内容

最新推荐文章于 2023-12-25 09:08:41 发布

Hack Rabbit

最新推荐文章于 2023-12-25 09:08:41 发布

阅读量9.2k

点赞数 3

分类专栏：前端文章标签：微信小程序 swiper

本文链接：https://blog.youkuaiyun.com/include_IT_dog/article/details/96631096

版权

前端专栏收录该内容

4 篇文章

订阅专栏

如何在swiper中显示两个item以及下一个item的部分内容

我所实现的效果

在这里插入图片描述

我实现的代码

  <!--图片轮播图-->
  <!--要展示两个item 以及下一个item的部分内容，circular需要设置为false，或者不设置，display-
  multiple-items设置为2，next-margin按照自己的需求设置-->
  
    <swiper indicator-dots = false vertical = false autoplay = false
      display-multiple-items='2' next-margin='150rpx' class="image_group">
       <block  wx:for="{{item.images}}"  wx:for-item="photo"  wx:key="*this">
         <swiper-item>
           <view class='swiper_item'>
             <image src="{{photo}}" mode="aspectFill"></image>
           </view>
         </swiper-item>
       </block>
    </swiper>

/*轮播图*/
.image_group{
  position: relative;
  margin-left: 20rpx;
  margin-top: 20rpx;
  height: 260rpx;
}

.swiper_item {
  width: 250rpx;
  height: 250rpx;
  overflow: hidden;
  border-radius: 10rpx;
}

.swiper_item image{
  width: 250rpx;
  height: 250rpx;
}

注意细节

要展示两个item 以及下一个item的部分内容，circular需要设置为false，或者不设置，否则会出现滑动时部分item不显示问题，display-multiple-items设置为2，next-margin按照自己的需求设置，它的数值决定了下一个item所展示部分的宽度

展示3.5、4.5、5.5个item实现同理

以上内容均为个人通过测试所得的效果，如果不妥，欢迎评论纠错