vue-列表的展开与折叠

最新推荐文章于 2024-11-22 09:34:25 发布

原创最新推荐文章于 2024-11-22 09:34:25 发布 · 7.7k 阅读

29 ·

本内容遵循CC 4.0 BY-SA版权协议

VUE 专栏收录该内容

83 篇文章

订阅专栏

博客介绍了列表项展开折叠功能，默认第一项展开其余折叠，单独点击可实现展开与折叠，且只有一项能展开。还说明了实现细节，包括详情样式、初始化数据，可通过设置 showDetail 控制默认展开情况，通过对比 showDetail 和 index 值控制显示，有展开折叠方法控制 showDetail 值。

功能描述

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
      }
},