微信小程序swiper组件中当数据少于display-multiple-items设置的数,就会出现这个不显示这个问题在社区看到在2019年的8月份已经有人提出了,官方说的是:目前可以通过追加空的swiper-item解决,我们也在想办法优化这块能力。这显然不是我们想要的结果,空的swiper-item,就会显示空白。
首先我们来分析下问题:当swiper组件中当数据少于display-multiple-items设置的数量的时候才会出现这样的问题,我们假设我们要显示3个。

display-multiple-items设置的数swiper组件中当数据显示个数是否正常
343
333
222
111
000

通过这个表格我们就可以很清楚的发现,当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>
Last modification:May 7th, 2020 at 07:45 pm
If you think my article is useful to you, please feel free to appreciate