konggang-city-miniprogram/pages/policy/policy_rich_card.vue

<template>
  <div class="card-situation">
    <div class="card-title">{{ model.title }}</div>
    <div
      v-html="model.text"
      class="card-text"
      :class="{ isfold: isfold }"
    ></div>
    <div class="fold" v-if="isFold && localIsFold" @click="changeFoldState">
      点击{{ foldText }}
    </div>
  </div>
</template>

<script>
export default {
  props: ["model", "isFold"],
  data() {
    return {
      isfold: false,
      height: 0,
      foldText: "展开",
      scrollTop: 0,
      localIsFold: true,
    };
  },
  mounted() {
    let query = uni.createSelectorQuery().in(this);
    let cardText = query.select(".card-text");
    cardText
      .boundingClientRect((res) => {
        this.height = res.height;
      })
      .exec(() => {
        if (this.height < 500) {
          this.localIsFold = false;
        } else {
          this.isfold = true;
        }
      });
  },
  watch: {
    isfold(newValue, oldValue) {
      if (newValue) {
        this.foldText = "展开";
      } else {
        this.foldText = "收起";
      }
    },
  },
  methods: {
    changeFoldState() {
      let poor = 0,
        Bheight = 0,
        Eheight = 0;
      let query = uni.createSelectorQuery().in(this);
      let con = query.select(".card-situation");
      con
        .fields({ size: true }, (e) => {
          Bheight = e.height;
        })
        .exec(() => {
          console.log("开始高度", Bheight);
        });
      this.isfold = !this.isfold;
      con
        .fields({ size: true }, (e) => {
          Eheight = e.height;
        })
        .exec(() => {
          // this.$emit("changeScroll", Bheight - Eheight);
          console.log("结束高度", Eheight);
        });
           this.$emit("changeScroll");
    },
  },
};
</script>

<style lang="scss" scoped>
.card-situation {
  // margin-top: 20rpx;
  padding: 20rpx;
  border-top: 8rpx solid #f2f2f2;
  box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
  border-radius: 32rpx;
  .card-title {
    font-weight: 600;
    padding: 20rpx 20rpx 0rpx 20rpx;
  }
  .card-text {
    padding: 20rpx;
    margin-top: 20rpx;
    font-size: 27rpx;
    letter-spacing: 1rpx;
    line-height: 50rpx;
    overflow: hidden;
  }
  .fold {
    display: flex;
    justify-content: center;
    align-items: center;
    color: $uni-color-primary;
  }
}
.isfold {
  max-height: 340rpx;
}
</style>