美文网首页
解决微信小程序中当数据少于display-multiple-it

解决微信小程序中当数据少于display-multiple-it

作者: 拥抱新的每一天_ | 来源:发表于2020-04-22 18:12 被阅读0次

    百度搜了很长时间到这个问题,一直都在说是腾讯到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>
    

    相关文章

      网友评论

          本文标题:解决微信小程序中当数据少于display-multiple-it

          本文链接:https://www.haomeiwen.com/subject/koewihtx.html