swiper轮播-swiper-item里存放多组数据，每次加载多个公告

最新推荐文章于 2024-07-09 22:53:52 发布

weixin_43991257

最新推荐文章于 2024-07-09 22:53:52 发布

阅读量1k

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_43991257/article/details/120019419

版权

本文介绍如何在微信小程序的swiper组件中，每次轮播显示多组（如每次显示三项）数据。通过后台返回的数组数据进行拆分重组，利用WXML进行循环展示，实现高效的轮播效果。

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

swiper轮播-swiper-item里存放多组数据，每次加载多个公告

实现效果：每次向上翻滚轮播，每次显示三项。

在这里插入图片描述
实现思路：
后台返回的数据是一个数组，我们需要拆分成每三个一组，然后每三个一组循环即可。
js处理数据：

var newArr = [];//新数组
var list = [    //后台返回的数据，这里先写死
  {
   
    id:1,
    title:"标题1",
    picture:'https://sdkhjdas/image/a.png'
  },
  {
   
    id:2,
    title:"标题2",
    picture:'https://sdkhjdas/image/a.png'
  },
  {
   
    id:3,
    title:"标题3",
    picture:'https://sdkhjdas/image/a.png'
  },
  {
   
    id:4,
    title:"标题4",
    picture:'https://sdkhjdas/image/a.png'