博客

在列表渲染时，有的内容过长时，会使页面过高，影响页面查看和美观，

所以就需要判断当  内容高度  是否超出当前  盒子高度 ，如果超出，则显示展开/收起按钮，如果不超过，则不显示。

直接上代码:

<template>
  <div class="mywork_box">
    <template v-if='data.length>0'>
      <div class="work_list" v-for='(item,index) in data'>
        <h2 class="workList_title"> {{item.label}}</h2>
        <!-- 这个就是内容高度，默认最大高度为200px ，isShow来控制最大高度，这里列表循环有点多哈哈-->
        <div class="work_neirong" :class="[item.isShow?'more_height':'small_height']" ref="neirongBox">
          <div class="neirongList" v-for="(item2,index2) in item.children">
            <h3 class="neirong_title">{{item2.label}}</h3>
            <p class="neirong_nav" v-for='(item3,index3) in item2.children'>
              <span>{{index3+1}}. {{item3.label}}</span>
              <span style='color:orange'>({{item3.period==1?'每年':item3.period==2?'每月':item3.period==3?'每周':item3.period==4?'每日':''}}{{item3.frequency}}次)</span>
            </p>
          </div>
        </div>
        <!-- 这个就是展开收起的按钮了 isMore来控制 -->
        <p v-if='item.isMore' class="moreText" @click="showChange(index)">
          <span v-if='!item.isShow'>
            <van-icon name="arrow-down" />
            展开全部
          </span>
          <span v-else>
            <van-icon name="arrow-up" />
            收起
          </span>
        </p>
      </div>
    </template>
    <!-- 如果没有内容 -->
    <v-nothing v-else></v-nothing>
  </div>
</template>

<script>
import { getMywork } from '@/api/mywork.js'
export default {
  components: {

  },
  props: [

  ],
  data() {
    return {
      data: [],
    };
  },
  computed: {

  },
  created() {

  },
  watch: {

  },
  methods: {
    //   获取列表
    getInfo() {
      getMywork().then(d => {
        if (d.data && d.data.treeTMatters.length > 0) {
          d.data.treeTMatters.forEach(item => {
            item.isMore = false;//这个是用来判断是否需要展示展开收起按钮
            item.isShow = false;//这个是用来判断内容是否展开
          })
          this.data = d.data.treeTMatters;
          //   这里一定要在nextTick中进行，要等页面渲染完毕，在进行操作，不然获取不到元素内容高度
          this.$nextTick(() => {
            var els = this.$refs.neirongBox;//获取到当前列表的内容元素进行循环
            els.forEach((item, index) => {
              // 获取到每一个元素的文档高度 scrollHeight 这个， 我这里盒子最大高度设置的200，自己设置
              if (item.scrollHeight > 200) {
                this.data[index].isMore = true;//然后将列表里控制的isMore改变，则当前这个列表则会展示展开收起的按钮了
              }
            })
          })
        }
      })
    },
    // 展开收起列表
    showChange(index) {
      this.data[index].isShow = !this.data[index].isShow;
    },
  },
  mounted() {
    this.getInfo();

  },
};
</script>

<style scoped lang="less">
.mywork_box {
  height: calc(~"100vh - 46px");
  background: #f8f8f8;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;

  h2,
  h3,
  p {
    margin: 0;
  }

  .work_list {
    padding: 10px;
    background: #fff;
    border-radius: 3px;
    margin-bottom: 8px;

    .workList_title {
      color: #434040;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      padding-left: 20px;
      position: relative;
      font-family: PingFang SC;

      &::after {
        content: "";
        width: 2px;
        height: 15px;
        background: #007eff;
        position: absolute;
        left: 0;
        top: 4px;
      }
    }
    .work_neirong {
      padding: 0 10px;
      box-sizing: border-box;
      background: rgba(213, 213, 213, 0.08);
      border: 1px solid #ececec;
      overflow: auto;
      transition: all 0.3s ease-in;

      .neirongList {
        .neirong_title {
          color: #434040;
          font-size: 14px;
          font-weight: bold;
          margin: 8px 0 3px;
        }
        .neirong_nav {
          font-size: 12px;
          padding: 5px;
          color: #999;
          line-height: 20px;
          box-sizing: border-box;
          border-bottom: 1px solid #f1f1f1;
        }
      }
    }
    .small_height {
      max-height: 200px;
    }
    .more_height {
      max-height: 2000px;
    }
    .moreText {
      margin-top: 10px;
      text-align: center;
      font-size: 12px;
      color: #999;
    }
  }
}
</style>

放两张图片，这是列表渲染后，只有中间这个内容超出高度，则显示了展开收起按钮