一、需求
行模块 轮播展示图文信息,使用是根据应用人员的需求会对行模块的数量进行动态配置,比如客户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,应该把变量声明也做成动态的,但是我目前不知道怎么解决这个问题,请教各位了。
这样处理后各个动态渲染出来的轮播图就可以正常使用了。