微信小程序swiper组件中当数据少于display-multiple-items设置的数,就会出现这个不显示这个问题在社区看到在2019年的8月份已经有人提出了,官方说的是:目前可以通过追加空的swiper-item解决,我们也在想办法优化这块能力。这显然不是我们想要的结果,空的swiper-item,就会显示空白。
首先我们来分析下问题:当swiper组件中当数据少于display-multiple-items设置的数量的时候才会出现这样的问题,我们假设我们要显示3个。
display-multiple-items设置的数 | swiper组件中当数据 | 显示个数 | 是否正常 |
---|---|---|---|
3 | 4 | 3 | 是 |
3 | 3 | 3 | 是 |
2 | 2 | 2 | 是 |
1 | 1 | 1 | 是 |
0 | 0 | 0 | 是 |
通过这个表格我们就可以很清楚的发现,当swiper组件中当数据数大于或则等于display-multiple-items设置的数的时候,就会显示正常。那么我们就可以动态的设计display-multiple-items的数量,如果swiper组件中当数据数大于或则等于display-multiple-items设置的数的时候,我们就显示我们要限定的数,否则就显示display-multiple-items的数量。这样我们就可以完美的绕开这个问题了。同时宽度(或者高度)我们也采用这种的方式来进行动态的设置就可以了。
示例代码:
<swiper style="width: 90%; height: {{datas.length>2?'330':datas.length*110}}rpx; vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items="{{datas.length>2?3:datas.length}}">
<block wx:for="{{datas}}">
<swiper-item>
<image src="{{item.avatar}}" style="width: 70rpx; height: 70rpx;min-width: 70rpx;min-height: 70rpx;" />
</swiper-item>
</block>
</swiper>