uniapp实现左右滑动布局思路共享

一、问题背景：

        开发中，左右滑动布局的应用非常常见。在此分享下我对左右滑动布局实现的思路。

二、思路展示

        直接展示例图：

        如上图，我画了两个草稿图以表达我的做法。

1、滑动布局中一个滑动item中横向显示4个item内容

2、滑动布局中一个滑动item中纵向显示4个item内容

数据：我的滑动布局数据在一个数组中(如：[item1，item2，item3，item4......])

数组方法：我是将数组中的所有item项for一遍，拿到每个要显示的内容(item)。

        然后将其切割成4个一组的数组，再push进一个空数组中。然后就成了如下的数组：

        [ [item1，item2，item3，item4]，[item1，item2，item3] ]

数据渲染：再到渲染逻辑处，swiper-item循环最外层的数组，拿到里面有多少个小数组(多少个              小 数组就是多少个滑动页，如：[ [item1，item2，item3，item4]，[item1，item2，item3] ]           大数组中包含2个小数组就是2个滑动页)。

        然后再在swiper-item内进行循环小数组，拿到小数组的每一个item(需要显示的内容，如：[ [item1，item2，item3，item4]，[item1，item2，item3] ])。

实际效果：实际渲染出来的图就是如此了。

三、总结

        uniapp的左右滑动布局，可以用swiper完成，但每个滑动页(swiper-item)它默认只渲染1个item。我们想办法让swiper-item渲染时还存在数组，再在swiper-item内渲染数组里的每一项即可。

知识点：数据请求、数组处理(splice、push等)、for循环嵌套

以上思路供各位参考，相关知识点可查看本人主页。如有大神，望赐教。