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>