数据排序九宫格横向排列(swiper)

list1: [0,1,2,3,4,5,6,7,8,9,10,11......]; //总数据

list2: []

要求显示顺序为：

即：每9条数据为一个屏幕，自左向右依次排序；思路：先拿数据总数除以3后向上取整，得到总共的列数；再以每一列为单位向里塞三条数据；以此思路整理出如下表格，（第一行为i的值，第一列为a的值，相交的部分为对应数据的标识S；）

核心：S= parseInt(i / 3) * 9 + i % 3 + a % 3 * 3 // 此为S和a、i的关系公式；

                var m; //列数；
                m = Math.ceil(this.list1.length / 3);
                //创建m列的item
                for (var i = 0; i < m; i++) {
                    this.List2.push({
                        item: []
                    })
                    //为每一列添加3条数据；
                    for (var a = 0; a < 3; a++) {
                        //因为向上取整的列数，可能存在最后一列不够三条的情况，所以加此if判断，也可改为如果没有跳出循环；
                        if (this.list1[parseInt(i / 3) * 9 + i % 3 + a % 3 * 3]) {
                            this.list2[i].item.push({
                                a: this.list1[parseInt(i / 3) * 9 + i % 3 + a % 3 * 3].a,
                                b: this.list1[parseInt(i / 3) * 9 + i % 3 + a % 3 * 3].b,
                                c: this.list1[parseInt(i / 3) * 9 + i % 3 + a % 3 * 3].c,
                                d: this.list1[parseInt(i / 3) * 9 + i % 3 + a % 3 * 3].d
                            })
                        }
                    }
                }

此时数据已经处理完毕，结构如右图：

视图部分：先循环出来list2的slide，再循环每个slide里的item；

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(slide,sindex) in list2" :key="sindex">
                        <div v-for="(item,index) in slide.item" :key="index">
                            <p >{{item.a}}</p>
                            <p >{{item.b}}</p>
                            <p >{{item.c}}</p>
                            <p >{{item.d}}</p>
                        </div>
                    </div>
                </div>
            </div>

效果如下图：

================================================================================

以此分割线祭奠不算浪费的浪费了的时间...

无意间发现了个问题，就是当数据为11条时，最后一条被吞掉了；反思发现是因为我们是以总数/3创建列数，但数据是横向排列，造成了被吞掉；如果直接m+2的话会造成右侧多出一列空白slide，此前一直被“ slidesPerView: 3, ”这个属性限制了思路，现在跳出来误区后修改思路，直接以9条数据为单位，重新排序数组，改造结果如下：

                var m;
                m = Math.ceil(this.list1.length / 9);
                for (var i = 0; i < m; i++) {
                    this.pList.push({
                        item: []
                    })
                    for (var a = 0; a < 9; a++) {
                        if (this.list1[9 * i + a]) {
                            this.list2[i].item.push({
                                a: this.productList[9 * i + a].a,
                                b: this.productList[9 * i + a].b,
                                c: this.productList[9 * i + a].c,
                                d: this.productList[9 * i + a].d
                            })
                        }
                    }
                }

视图部分无需改动

来源：oschina

链接：https://my.oschina.net/u/3698732/blog/4293367

标签

swiper

wrapper