vue-列表的展开与折叠
功能描述1、默认折叠,点击时展示全部数据2、点击A项,A展开,之后有两种情况:①再次点击A,A折叠;②点击其他项,如B,这时B展开,A折叠解决方式1、给展开折叠图标添加一个样式,显示成动画效果<div class="arrow" :class="{'open':showDetail === index}"></div>.arrow{posit...
·
- 功能描述
1、默认第一项展开,其余项全部折叠
2、单独点击某一项,实现展开与折叠功能,
3、注意:只有一项是展开状态
- 实现
1、详情样式
<div class="transfer-plan" v-for="(item,index) in transferList" :key="index" @click="foldAndUnfold(index,item)">
<div class="transfer-plan-head">
<div class="left"> 36分钟(1.1公里)|步行719米|5元 </div>
<div class="arrow" :class="{'open':showDetail === index}"></div>
</div>
<template v-if="showDetail === index">
<!-- 2 公交地铁 -->
<!-- 3 火车 -->
<!-- 4 长途巴士 -->
</template>
</div>
2、初始化的数据
data() {
return {
showDetail:0,//默认第一项展开
transferList:[]
}
如果,默认不展开任何一项, showDetail:-1,即可
3、展开折叠时通过对比showDetail === index 的值来控制是否显示折叠内容,上下箭头的图标样式如此:
<div class="arrow" :class="{'open':showDetail === index}"></div>
.arrow{
width: 0.6rem;
height: 0.3rem;
background url(../../../assets/images/icon_up.png) no-repeat
background-size: 100% 100%
transition: transform 0.3s
-webkit-transition: transform 0.3s
&.open{
transform : rotate(-180deg)
}
}
4、 展开折叠方法foldAndUnfold,用来控制showDetail 的值
foldAndUnfold(index,item){
// console.log("index====",index)
if(this.showDetail===index){//两次点击的对象相同,关闭
this.showDetail = -1
}else{//点击的对象不同,先关闭前一对象,再打开当前对象
this.showDetail = index
}
},
更多推荐
已为社区贡献32条内容
所有评论(0)