Vue轮播图 实现根据数据动态添加页码

想要达到的效果:

假设轮播图单个slide（单页）内存在8组渲染数据，当数据存在9组的时候，slide会自动将第9组数据渲染到第二个slide下；

数据存在7“个”时：

数据存在10“个”时：

其中数据为定义的模拟数据，接下来是代码的实现过程：

1、使用swiper插件：vue-awesome-swiper（Github上搜索相对应插件）

2、下载插件到项目内：npm install vue-awesome-swiper@2.6.7 --save //（@x.x.x表示插件版本）

3、全局下（main.js）引入:

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

4:、渲染部分（html）是以组件形式实现的：

<template>
	<swiper class="two" :options="swiperOption" ref="mySwiper">
		<!-- slides -->
		<swiper-slide class="flx" v-for="(item,k) in arr" :key="k">
			<div v-for="item2 in item" class="imgurl">
				<img :src="item2.url" />
				<div>{{item2.text}}</div>
			</div>
		</swiper-slide>
		<div class="swiper-pagination" slot="pagination"></div>	<!-- 轮播图页面小点 -->
	</swiper>
</template>

5、逻辑层（js）部分：

<script>
    import 'swiper/dist/css/swiper.css'这里注意具体看使用的版本是否需要引入样式，以及具体位置。
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		name: 'Homeswiper2',
		components: {
	      swiper,
	      swiperSlide
	   	},
		data() {
			return {
				list: [{
						'url': 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
						'text': '景点门票'
					}, {
						'url': 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
						'text': '北京必游'
					}, {
						'url': 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
						'text': '一日游'
					}, {
						'url': 'http://img1.qunarzz.com/piao/fusion/1811/f6/e54fad3ea337b02.gif',
						'text': '年终大促'
					}, {
						'url': 'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
						'text': '动植物园'
					}, {
						'url': 'http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png',
						'text': '故宫'
					}, {
						'url': 'http://img1.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png',
						'text': '崇礼滑雪'
					}
				],
				swiperOption: {
					// some swiper options/callbacks
					// 所有的参数同 swiper 官方 api 参数
					pagination: {
						el: '.swiper-pagination',
					},
					spaceBetween:30,
					loop: false
				}
			}
		},
		computed: {
			arr(){
				let arr = []
					this.list.forEach((val,index)=>{            //遍历list内的数据
						const num = parseInt(index / 8)    //num相当于页码的索引值第0页，第一页...
						if(!arr[num]){
							arr[num]=[]                //判断arr[num]是否存在
						}
						arr[num].push(val)                //若存在将val（数据的内容）添加到arr内
					})
						return arr
			}
		}
	}
</script>

逻辑层代码运用到二维数组的思想：假设arr = [{1,2,3},{4,5,6}{7,8,9}],其中的数据1,2,3对应渲染到slide的第一页的内容，如果存在第四个数据，那么会分配到第二个slide内，以此类推。

以上是我个人的理解与实现，若有其它需要补充的，后续会更新。