解决微信小程序中当数据少于display-multiple-items设置的数时，会出现不显示数据的情况？

最新推荐文章于 2024-06-21 16:18:17 发布

今天星期八

最新推荐文章于 2024-06-21 16:18:17 发布

阅读量3.5k

点赞数 3

文章标签：微信小程序

本文链接：https://blog.csdn.net/Missbelover/article/details/124099645

版权

本文介绍了两种解决微信小程序中根据图片数量动态调整轮播图显示数量的方法。第一种方法通过判断数组长度设置`display-multiple-items`属性；第二种方法使用条件渲染，分别处理图片数量大于2和小于等于2的情况。示例代码详细展示了如何实现这一功能，确保了轮播图的正确展示。

摘要由CSDN通过智能技术生成

解决办法有两种

一、通过判断其数组长度
二、将两种情况分开写，大于要设置的数量时，写一种样式，小于时，再写一种样式

解决方案一：

<swiper class="swiperMain"  autoplay="false" current="0" interval="3000" duration="500" circular="true" indicator-dots="{{false}}" display-multiple-items="{{finalObj.imageInfo.length>2?3:finalObj.imageInfo.length}}">
  <swiper-item class="item" wx:for="{{finalObj.imageInfo}}" wx:for-item="items" wx:key="index">
    <image src="{{items}}"></image>
  </swiper-item>
</swiper>

解决方案二

<block wx:if="{{finalObj.imageInfo.length>2}}">
  <swiper class="swiperMain" autoplay="true" current="0" interval="2000" duration="1000" circular="true" indicator-dots="{{false}}" display-multiple-items='3'>
    <swiper-item class="item" wx:for="{{finalObj.imageInfo}}" wx:for-item="items" wx:key="index">
      <image src="{{items}}"></image>
    </swiper-item>
  </swiper>
</block>
<block wx:else>
  <view class="img_normal_box">
    <image  wx:for="{{finalObj.imageInfo}}" wx:for-item="items" wx:key="index" class="img_normal" alt="" src="{{items}}"></image>
  </view>
</block>