在某些业务场景里，需要使用某些用户的排名信息，进行轮播展示。
先放下效果图：
而以上效果有点问题是支付宝小程序swiper的无缝滚动效果是有缺陷的，不过暂时还能接受吧。
微信有个属性：display-multiple-items 同时显示的滑块数量。
支付宝这边是没有这个属性的，那么如果操作显示呢？
来实践一发，假如swiper的总高度为320，给swiper-item加个class，然后设置高度，那么swiper-item的高度为80，是否可以实现呢？
实践结果是肯定的，同时展示了四个可滑动的swiper-item，但是出现了其他问题，这个swiper一滑动就是滑动四个swiper-item，那我们的效果又没有实现。
<view class="container"> <view class="swiper-box"> <swiper indicator-dots="{{false}}" vertical circular autoplay interval="2000"> <block a:for="{{20}}" a:key="*this"> <swiper-item> <view class="content">帅比你好。</view> </swiper-item> </block> </swiper> </view> </view>
最后如何操作呢？
给swiper-slides这个组件设置高度。是不是从没看到过这个组件。
.container { width: 100%; height: 100vh; background: #F6F7F8; } .swiper-box { width: 100%; background: #FFF; padding: 20rpx 0; box-sizing: border-box; } swiper { width: 100%; height: 300rpx !important; } swiper-item, swiper-slides { height: 80rpx !important; } .content { width: 100%; height: 80rpx; display: flex; line-height: 80rpx; border-bottom: 2rpx solid #F3F4F5; padding: 0 32rpx; box-sizing: border-box; }
最终实现了上面示例图的效果。
代码片段如下：
https://pen.mini-code.com/s/22ba1fa5-73fb-4e2e-bcdc-024a0620a227
