JS实用功能-3、Vue中v-for配合使用Swiper插件问题

问题描述：

在一个页面中需要一个用swiper的轮播图，数据大概有40条，每一屏幕的swiper只显示其中的n条数据。

代码描述：

<div id="app">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            a b c d e f g
            </div>
            <div class="swiper-slide">
            1 2 3 4 5
            </div>
        </div>
    </div>
</div>

 

图片描述直接上图：

思路：

使用双重for循环，把n个元素放到一个小组组，再把这些小组组合成一个大的数组。

实现：

首先模拟数据列表有11条，每个Swiper-slide放6条，计算需要Swiper-slide的公式如下：

reviewList: [
        {imgSrc: '../images/img.png',msg: '某某代表在大会上发言1'},
        {imgSrc: '../images/img.png',msg: '某某代表在大会上发言2'},
        {imgSrc: '../images/img.png',msg: '某某代表在大会上发言3'},
        {imgSrc: '../images/img.png',msg: '某某代表在大会上发言4'},
        {imgSrc: '../images/img.png',msg: '某某代表在大会上发言5'},
        {imgSrc: '../images/img.png',msg: '某某代表在大会上发言6'},
        {imgSrc: '../images/img.png',msg: '某某代表在大会上发言7'},
        {imgSrc: '../images/img.png',msg: '某某代表在大会上发言8'},
        {imgSrc: '../images/img.png',msg: '某某代表在大会上发言9'},
        {imgSrc: '../images/img.png',msg: '某某代表在大会上发言10'},
        {imgSrc: '../images/img.png',msg: '某某代表在大会上发言11'},
      ];
barNum =  reviewList.length / 6 === 0 ? reviewList.length / 6 : (reviewList.length / 6) + 1 ;

公式中的6代表的是需要在Swiper-slide中存放的条数。

第二步需要把数组拆分然后重组。让每6条或不足6条的组成一个数组。

var  barAry: [];
for(let i = 0; i < reviewList.length; i += 6){
        barAry.push(reviewList.slice(i, i + 6));
}

上面中6代表的是需要在Swiper-slide中存放的条数。组合成大数组的数据如下：

[
    [{
        "imgSrc": "../images/img.png",
        "msg": "某某代表在大会上发言1"
    }, {
        "imgSrc": "../images/img.png",
        "msg": "某某代表在大会上发言2"
    }, {
        "imgSrc": "../images/img.png",
        "msg": "某某代表在大会上发言3"
    }, {
        "imgSrc": "../images/img.png",
        "msg": "某某代表在大会上发言4"
    }, {
        "imgSrc": "../images/img.png",
        "msg": "某某代表在大会上发言5"
    }, {
        "imgSrc": "../images/img.png",
        "msg": "某某代表在大会上发言6"
    }],
    [{
        "imgSrc": "../images/img.png",
        "msg": "某某代表在大会上发言7"
    }, {
        "imgSrc": "../images/img.png",
        "msg": "某某代表在大会上发言8"
    }, {
        "imgSrc": "../images/img.png",
        "msg": "某某代表在大会上发言9"
    }, {
        "imgSrc": "../images/img.png",
        "msg": "某某代表在大会上发言10"
    }, {
        "imgSrc": "../images/img.png",
        "msg": "某某代表在大会上发言11"
    }]
]

 

最后是在v-for中实现：

<div class="swiper-container">
       <div class="swiper-wrapper">
            <div class="swiper-slide msg-content" v-for="value in barAry">
                  <div class="graphic" v-on:click="popInfo" v-for="value2 in value">
                      <img :src="value2.imgSrc" alt="">
                           <p>{{ value2.msg }}</p>
                    </div> 
             </div>
       </div>
 </div>