vue 展开收起仿手风琴动画

最新推荐文章于 2023-07-04 15:08:09 发布

小白兔12345678

最新推荐文章于 2023-07-04 15:08:09 发布

阅读量200

点赞数

文章标签： css 前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_58373910/article/details/131436642

版权

<template>
  <view class="tree" v-if="list.length">
    <view class="item" v-for="item in lists">
      <view class="title" @click="curShow(item)">
        {{ item.name }}
        <b :class="item.flag?'down':'up'">^</b>
      </view>
      <!-- 包一层这里是关键-->
      <view class="warp-item" :style="{maxHeight:item.flag ? maxHeight : 0}">
        <view id="list-inner">
          <view class="sub-x" v-for="sub in item.sublists">
            {{ sub.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "classDetail",
  data() {
    return {
      lists: [],
      maxHeight: 0
    }
  },
  mounted() {
  // 模拟后台返回数据
    setTimeout(() => {
      this.lists = [
        {
          name: "测试测试",
          flag: false,
          sublists: [
            {name: "测试测试1"},
            {name: "测试测试1"},
            {name: "测试测试1"},
            {name: "测试测试1"},
          ]
        },
        {
          name: "家电家具",
          flag: false,
          sublists: [
            {name: "家电家具1"},
            {name: "家电家具1"},
            {name: "家电家具1"},
            {name: "家电家具1"}
          ]
        },
        {
          name: "衣服包包",
          flag: false,
          sublists: [
            {name: "衣服包包1"},
            {name: "衣服包包1"},
            {name: "衣服包包1"},
            {name: "衣服包包1"}
          ]
        },
        {
          name: "礼包专区",
          flag: false,
          sublists: [
            {name: "礼包专区1"},
            {name: "礼包专区1"},
            {name: "礼包专区1"},
            {name: "礼包专区1"}
          ]
        },
        {
          name: "礼包专区",
          flag: false,
          sublists: [
            {name: "礼包专区1"},
            {name: "礼包专区1"},
            {name: "礼包专区1"},
            {name: "礼包专区1"}
          ]
        }
      ]
    }, 2000)
  },
  methods: {
    // 获取dom
    getRect(context, selector) {
      return new Promise((resolve) => {
        const query = uni.createSelectorQuery().in(context);
        query
            .select(selector)
            .boundingClientRect((data) => {
              resolve(data);
            })
            .exec();
      });
    },
    // 展开当前点击项
    curShow: function (item) {
      this.getRect(this, '#list-inner').then(res => {
        item.flag = !item.flag;
        //取反来控制一级选项的显示与隐藏
        this.maxHeight = res.height + 'px'
      })
    }
  },
}
</script>

<style scoped>

.tree {
  margin: 0 auto;
  width: 150px;
  background-color: #0088CC;
  color: white;
  font-size: 16px;
}

.title {
  position: relative;
  border: 1px solid;
}

b {
  position: absolute;
  transition: all ease 0.6s;
  top: 50%;
  right: 0;
  margin-top: -10px;
}

b.up {
  transform: rotate(0deg);
}

b.down {
  transform: rotate(180deg);
}

.warp-item {
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.sub-x {
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid;
}

</style>

一定要包一层