欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于小程序swiper组件中只有一条数据时的渲染问题

程序员文章站 2022-07-13 14:11:06
...

自己基础知识不牢固,所以才会造成使用上的懵逼,上一任的bug我来改,所以在项目熟悉上还有问题,所以自己想来点小分享,共同学习,网上查找的资源没有合适解决问题的
知识在于分享
在小程序开发过程中,使用swiper轮播组件时,需求是当使用循环数组时,数组一有多条数据,数组二中只有一条数据时,数组一想要在视图层展示两条数据,此时数组二中的一条数据展示过程中踩了许多坑,第一次写博客,有点啰嗦了,直接上图解决问题吧
最初的效果

商品是可以进行左右滑动的
开始的swiper配置:
display-multiple-items="2"

关于小程序swiper组件中只有一条数据时的渲染问题想要实现的效果
关于小程序swiper组件中只有一条数据时的渲染问题
实现过程就是将swiper组件中的配置display-multiple-items进行三元运算

display-multiple-items="{{item.数组名.length >1 ? 2 : 1}}"

开始将display-multiple-items的值设为2时,数组二在页面结构中有循环,但视图没有渲染出来,display-multiple-items的值设为1或者不设置(默认为1),数组一的需求不能实现,这样只能在当前页面展示一条数据