xnzt/xnzt-h5/pages/find/policyInformation/index.vue

<template>
  <view>
    <pol-inf-component :policyObject="policyObject" :reTotal.sync="reTotal">
    </pol-inf-component>
  </view>
</template>

<script>
import polInfComponent from "@/pages/find/policyInformation/polInfComponent/index";

export default {
  name: "policyInformation",
  components: { polInfComponent },
  props: {},
  data() {
    return {
      equals: false,
      noMore: false,
      reTotal: 0,
      // 每次上拉时加载条目数的增值
      loadAddCount: 5,
      policyObject: {
        showTotal: 18,
        loadMoreIf: true,
        isReSearch: true,
      },
    };
  },
  methods: {
    loadMore(diff) {
      this.$set(
        this.policyObject,
        "showTotal",
        this.policyObject.showTotal + this.loadAddCount - (diff > 0 ? diff : 0)
      );
    },
    changeEntryParameter() {
      if (this.policyObject.showTotal + this.loadAddCount <= this.reTotal) {
        this.loadMore();
      } else if (!this.equals) {
        this.loadMore(
          this.policyObject.showTotal + this.loadAddCount - this.reTotal
        );
        this.equals = true;
      } else {
        this.policyObject.showTotal--;
        this.policyObject.showTotal++;
      }
    },
  },
  onReachBottom() {
    this.changeEntryParameter();
  },
};
</script>

<style lang="scss" scoped>
.policyInformation {
  background-color: white;
  height: calc(100%);
}

.list-box {
  display: -webkit-flex;
  display: flex;

  .content-list {
    width: 100vw;

    .arctile-list {
      width: 100%;
      height: 20vw;

      .box-left {
        width: 78%;
        height: 160rpx;
        float: left;
        margin-left: 2vw;
        margin-top: 3.5vw;
      }

      .list-img {
        width: 16vw;
        height: 12.12vw;
        float: left;
        margin-left: 2vw;
        margin-right: 2vw;
        margin-top: 4vw;
      }
    }
  }
}
.arctile-list {
  margin-top: 0rpx;
}
.list-title {
  width: 100%;
  height: auto;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.boxlist-down {
  margin-top: 15rpx;
  padding-top: calc(1rem - 1vh);
}
.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #67c23a;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  margin-top: 12rpx;
}
.list-time {
  width: 32rpx;
  height: 32rpx;
  float: left;
  margin-left: 60rpx;
  margin-top: 8rpx;
}
.date {
  position: absolute;
  color: #888888;
  padding-left: 10rpx;
  margin-top: 8rpx;
}
</style>