兼容移动、pc、小程序等多端的滚动列表mescroll插件使用

//1. 执行npm命令安装mescroll :   npm install --save mescroll.js

//2. 引入mescroll组件 :   
//import MescrollVue from 'mescroll.js/mescroll.vue'

//3.实例：

<template>
  <div id="commentArea">

    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">

      <template v-if="!noData">
        <div class="reviews" v-for="(item,i) in commentList" :key="i">

          <div class="reviewItem">
            <div class="reviewItem_top">
              <div class="userInfo">
                <img src="../../assets/icon/icon_avatar.png" class="avatar" />
                <div class="buyer">
                  {{   item.isAnonymous=='0' ?  '匿名买家':item.userMobile}}
                </div>
              </div>
              <div class="time">
                {{item.createTime | timeFormat}}
              </div>
            </div>
            <div class="reviewItem_bottom" v-html="item.contentFont">
            </div>
          </div>
        </div>
      </template>

      <div class="noData" v-else>
        <img class="bg" src="../../assets/imgs/Nodata.png" alt="">
        <div class="msc">
          暂无数据
        </div>
      </div>

    </mescroll-vue>

  </div>
</template>
<script>
import { getCommentList } from "@/api";  //获取数据列表的接口
import MescrollVue from "mescroll.js/mescroll.vue";
export default {
  components: {
    MescrollVue,
  },
  data() {
    return {
      noData: false,
      mescroll: null,
      mescrollDown: {
        // callback: this.upCallback1,
        afterLoading: function (mescroll) {
          // 结束下拉之前的回调. 返回延时执行结束下拉的时间,默认0ms; 常用于结束下拉之前再显示另外一小段动画,才去结束下拉的场景, 参考案例【dotJump】
          return 800;
        },
        // auto: false,
        textOutOffset: "下拉刷新",
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback2,
        auto: false,
        htmlNodata: '<p class="upwarp-nodata"> 没有更多了 </p>',
      },
      commentList: [],
    };
  },
  created() {

  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
      let page = {
        num: 1,
        size: 10,
      };
      this.getProductCommentList(page, mescroll, "up");
    },
    // 获取评价列表
    getProductCommentList(page, mescroll, way) {
      getCommentList({
        current: page.num,
        size: page.size,
        spuId: this.$route.query.spuId,
      }).then((res) => {
        console.log({ res });
        if (res.data.total < 1) this.noData = true;

        // 如果是第一页需手动置空列表
        if (page.num === 1) this.commentList = [];
        this.commentList = this.commentList.concat(res.data.records);
        this.$nextTick(() => {
          mescroll.endSuccess(res.data.records.length);
        });
      });
    },
    //下拉
    upCallback1(page, mescroll) {
      this.getProductCommentList(page, mescroll, "down");
    },
    //上拉
    upCallback2(page, mescroll) {
      console.log({ page });
      this.getProductCommentList(page, mescroll, "up");
    },

    getList() {},
  },
};
</script>
<style  lang="scss" scoped>
#commentArea {
  background-color: #f4f4f4;
  height: 100vh;
  display: flex;
  text-align: justify;
  overflow: hidden;
}
.reviews {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #303236;
  background-color: #fff;
  margin: 0 12px 8px;
  border-radius: 8px;
  line-height: 22px;
  padding: 12px;
  &:first-child {
    margin-top: 12px;
  }
  .reviewItem {
    .reviewItem_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 11px;
      .userInfo {
        display: flex;
        align-items: center;
        .avatar {
          width: 42px;
          margin-right: 7px;
        }
        .buyer {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #303236;
        }
      }
      .time {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #989898;
      }
    }
    .reviewItem_bottom {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #303236;
    }
  }
}
.noData {
  width: 100%;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 14px;
  text-align: center;
  .bg {
    margin: 46px 0 18px;
    width: 100%;
  }
}
</style>