在element-ui的Carousel跑马灯和Collapse折叠面板中挣扎好久，终于将两者完美结合；先上效果感受下吧！
1.gif
咔咔咔！样式虽然不是很完美，但是效果还是杠杠滴！
为了像我一样的小白更好的理解和应用，单独写了这个小demo，可以直接复制粘贴的哦！
话不多说，上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
</head>
<body>
<div id="app">
<h3>element-ui的Carousel跑马灯和Collapse折叠面板的结合</h3>
<el-carousel :autoplay=false>
<el-carousel-item v-for="(item,index) in msg">
<el-collapse v-model="activeNames[index]" v-for="(val,ind) in item.lcxg" :key="ind" accordion>
<el-collapse-item :title="val.tit" :name="'item'+ind">
<div>{{val.con}}</div>
</el-collapse-item>
</el-collapse>
</el-carousel-item>
</el-carousel>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
msg:'',
activeNames: {}
},
mounted(){
this.dataFn();
},
methods: {
dataFn(){
let res = [
{
"lcxg": [
{
"tit": "tit1",
"con": "1111111111111111"
},
{
"tit": "tit2",
"con": "1111111111111111"
},
{
"tit": "tit3",
"con": "1111111111111111"
}
]
},
{
"lcxg": [
{
"tit": "tit1",
"con": "1111111111111111"
},
{
"tit": "tit2",
"con": "1111111111111111"
},
{
"tit": "tit3",
"con": "1111111111111111"
}
]
},
{
"lcxg": [
{
"tit": "tit1",
"con": "1111111111111111"
},
{
"tit": "tit2",
"con": "1111111111111111"
},
{
"tit": "tit3",
"con": "1111111111111111"
}
]
}
]
this.msg = res;
let activeNames = {};
res.map(function(v,i){
activeNames[i] = 'item'+0;
})
this.activeNames = activeNames;
}
}
})
</script>
</body>
</html>
感谢老杜的鼎力支持，没有你就没有此文章哦！thanks for your help!
