在element-ui的Carousel跑馬燈和Collapse折疊面板中掙扎好久，終于將兩者完美結(jié)合；先上效果感受下吧！
1.gif
咔咔咔！樣式雖然不是很完美，但是效果還是杠杠滴！
為了像我一樣的小白更好的理解和應(yīng)用，單獨(dú)寫(xiě)了這個(gè)小demo，可以直接復(fù)制粘貼的哦！
話不多說(shuō)，上代碼：
<!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" />
</head>
<body>
<div id="app">
<h3>element-ui的Carousel跑馬燈和Collapse折疊面板的結(jié)合</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>
感謝老杜的鼎力支持，沒(méi)有你就沒(méi)有此文章哦！thanks for your help!
