河豚随心记（四）实现多swiper轮播图组件/动态数量轮播图swiper组件

一、需求

行模块 轮播展示图文信息，使用是根据应用人员的需求会对行模块的数量进行动态配置，比如客户1会配置3行，就会有个3个轮播图组件，客户2会配置5行，就会有5个轮播图组件，每个轮播图组件都是独立开的，indicator样式需要自定义。

二、分析

写单个轮播图或者确定数量的多个轮播图组件是很简单的，uniapp官网组件文档看一下，搬一下就好，这次需求中是动态配置的，开发人员一开始是无法确定轮播图组件的数量的，所以轮播图的各个属性都得写成动态的。

三、实现

1.数据源处理比较简单，外层v-for出多个轮播图组件后，swiper-item直接v-for ： item.数据源列表即可；
2.轮播图当前下标current属性处理比较关键，多个轮播图组件要独立开那肯定不能用同一个current变量，我的做法是提前声明几个名称类似的变量：

		data() {
			return {
				elCurrent1: 0,
				elCurrent2: 0,
				elCurrent3: 0,
				elCurrent4: 0,
				elCurrent5: 0,
				elCurrent6: 0,
				}
			}

在组件标签current属性上使用计算属性：

<swiper class="swiper" :current="elCurrentCal(index)">

elCurrentCal(){
				return function(index){
					return `${'elCurrent' + index}`
				}
			},

这里的index就是外层v-for里的index，这样就可以动态绑定current了，但是这里会有问题，因为current变量的数量也是提前写好的，我预先放了6个，如果动态swiper的数量超过6个，那就会报变量undefined，应该把变量声明也做成动态的，但是我目前不知道怎么解决这个问题，请教各位了。
这样处理后各个动态渲染出来的轮播图就可以正常使用了。