vue-列表的展开与折叠

• 功能描述

1、默认第一项展开，其余项全部折叠

2、单独点击某一项，实现展开与折叠功能，

3、注意：只有一项是展开状态

• 实现

1、详情样式

  36分钟(1.1公里)|步行719米|5元 

2、初始化的数据

data() {return {showDetail:0,//默认第一项展开transferList:[]}

如果，默认不展开任何一项， showDetail:-1,即可

3、展开折叠时通过对比showDetail === index 的值来控制是否显示折叠内容，上下箭头的图标样式如此：

.arrow{width: 0.6rem;height: 0.3rem;background url(../../../assets/images/icon_up.png) no-repeatbackground-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}
},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！