百度搜了很长时间到这个问题,一直都在说是腾讯到bug,吓得我也差点去手动写了一个轮播图,还好有个大佬给我小菜鸟一个思路,下面就把思路说一下,顺便附上代码
思路:(这里以每次显示三条数据做例子,显示其他多条数据思路也是一一样滴)
1.在display-multiple-items中对后端返回的数据的长度做判断,如果后端返回的数据长度大于2,那么就显示三条数据,反之就显示两条数据或者一条数据或者不显示数据,也就是如果数组长度大于2,display-multiple-items就等于3;如果数组长度不大于2,display-multiple-items就等于数组的长度
2.每一个swiper的高度固定,这里以110rpx做例子,它的高度也根据后端返回的数组的长度进行判断,如果数组长度大于2,高度就等于330rpx;如果数组长度不大于2,高度就等于数组的长度*110rpx;
代码如下:
<view style="display: flex; align-items: center; background: #FFFFFF;">
<swiper class="swiper-disabled" style="width: 90%; height: {{newest_orders.length>2?'330':newest_orders.length*110}}rpx; padding-left: 10rpx; display: flex; align-items: center; " vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items="{{newest_orders.length>2?3:newest_orders.length}}">
<block wx:for="{{newest_orders}}">
<swiper-item style="display: flex; align-items: center;">
<view style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding-left: 15rpx;">
<image src="{{item.user.avatar}}?x-oss-process=style/thumbnail100" style="width: 70rpx; height: 70rpx;min-width: 70rpx;min-height: 70rpx; border-radius: 35rpx;" />
</view>
</swiper-item>
</block>
</swiper>
</view>
网友评论