需求:每页轮播图排放十个数据,总数据量不定。
分析:
1.数据存与一数组之中arr=[0,1,2,3,4,5,6,7,8,9,a,b,c,d,e]
2.处理该数组,每十个数据分为一个小数组,小数组再存于一个大数组中。
arrb=[[0,1,2,3,4,5,6,7,8,9],[a,b,c,d,e]]
3.循环嵌套渲染轮播图,arrb.length为轮播图页数,arrb储存的小数组循环渲染各个数据。
实现:
html:
<view class="swiper_box">
<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" :indicator-active-color="active_color">
<swiper-item class="swiper-item " v-for="(v, i) in myArr" :key="i">
<view class="cell" v-for="(w, j) in v" :key="j" :class="w.class">
<text>{{w.txt}}</text>
</view>
<view class="" v-for="index of 10-v.length" :key="index"><!--flex布局,最后一页数据不满十个时,布局解决方案-->
</view>
</swiper-item>
</swiper>
</view>
data:
arr:[
{
txt:'0',
class:'0',
url:''
},
{
txt:'1',
class:'1',
url:''
},
{
txt:'2',
class:'2',
url:''
},
{
txt:'3',
class:'3',
url:''
},
{
txt:'4',
class:'4',
url:''
},
{
txt:'5',
class:'5',
url:''
},
{
txt:'6',
class:'6',
url:''
},
{
txt:'7',
class:'7',
url:''
},
{
txt:'8',
class:'8',
url:''
},
{
txt:'9',
class:'9',
url:''
},
{
txt:'a',
class:'a',
url:''
},
{
txt:'b',
class:'b',
url:''
},
{
txt:'c',
class:'c',
url:''
},
{
txt:'d',
class:'d',
url:''
},
{
txt:'e',
class:'e',
url:''
}
]
数据分组(computed)
myArr: function () {
var arrb = [];
let i = 0;
let sectionCount = 10;
for (let j = 0; j < this.arr.length; j++) {
i = parseInt(j / sectionCount);
if (arrb.length <= i) {
arrb.push([]);
}
arrb[i].push(list[i]);
}
return arrb;
}
效果