veu中使用mint-ui实现下拉刷新上拉加载更多

<template>
  <div id="participation_rate">
    <div class="avatar">
      <div class="left">
        <img src="../assets/img/avatar.png" alt="" />
        <span>某某街道</span>
      </div>
      <div class="right" @click="swiperUser">
        <span>切换账号</span>
        <img src="../assets/img/右箭头.png" alt="" />
      </div>
    </div>
    <div class="participation">
      <div class="ranking">
        <div class="ranking-left">
          <span></span>
          <span>参与率排行</span>
        </div>
        <div class="ranking-right" @click="selectTime">
          <input type="button" value="搜索" />
          <img src="../assets/img/右箭头.png" alt="" />
        </div>
      </div>
      <div class="wrapper">
        <mt-loadmore
          :top-method="loadTop"
          :bottom-method="loadBottom"
          :bottom-all-loaded="allLoaded"
          @bottom-status-change="handleBottomChange"
          :auto-fill="false"
          ref="loadmore"
        >
          <!-- 真实渲染数据 -->
          <div class="card-item" v-for="(item, index) in goods" :key="index">
            {{ item.name }}
          </div>
          <!-- 下拉提示状态 -->

          <div slot="top" class="mint-loadmore-top" style="text-align:center">
            <span
              v-show="topStatus !== 'loading'"
              :class="{ 'is-rotate': topStatus === 'drop' }"
              >↓</span
            >
            <mt-spinner
              v-show="topStatus == 'loading'"
              color="#26a2ff"
              :size="15"
              style="float: left; margin: 12px 0 0 12px;"
            ></mt-spinner>
            <span class="mint-loadmore-text">{{ topText }}</span>
          </div>

          <div v-if="allLoaded" style="text-align:center;" class="data-none">
            没有更多数据了
          </div>
          <!-- 上拉提示状态 -->
          <div slot="bottom" class="mint-loadmore-bottom">
            <span
              v-show="bottomStatus !== 'loading'"
              :class="{ 'is-rotate': bottomStatus === 'drop' }"
              >↑</span
            >
            <mt-spinner
              v-show="bottomStatus == 'loading'"
              color="#26a2ff"
              :size="15"
              style="float: left; margin: 12px 0 0 12px;"
            ></mt-spinner>
            <span class="mint-loadmore-text">{{ bottomText }}</span>
          </div>

          <!-- 状态 -->
        </mt-loadmore>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" },
        { name: "数据数据数据数据数据数据数据数据数据数据数据数据数据数据" }
      ],
      page: 1,
      limit: 10,
      allLoaded: false,
      bottomStatus: "", //底部上拉加载状态
      topStatus: "", //顶部下拉加载状态

      topText: "释放更新",
      topPullText: "下拉刷新",
      topDropText: "释放更新",
      topLoadingText: "加载中...",
      bottomText: "",
      bottomPullText: "上拉刷新",
      bottomDropText: "上拉加载",
      bottomLoadingText: "加载中..."
    };
  },
  mounted() {
    // this.initScroll();
    this.cancelPage();
  },
  watch: {
    "$route.path": function(newPath, oldPath) {
      if (newPath === "/participation-rate") {
        // 取消监听返回按钮关闭页面, 不用写
        this.cancelPage();
      }
    },
    topStatus(val) {
      console.log(val);
      switch (val) {
        case "pull":
          this.topText = this.topPullText;
          break;
        case "drop":
          this.topText = this.topDropText;
          break;
        case "loading":
          this.topText = this.topLoadingText;
          break;
        case "loadingEnd":
          this.topText = this.topDropText;
      }
    },
    bottomStatus(val) {
      console.log(val);
      switch (val) {
        case "pull":
          this.bottomText = this.bottomPullText;
          break;
        case "drop":
          this.bottomText = this.bottomDropText;
          break;
        case "loading":
          this.bottomText = this.bottomLoadingText;
          break;
      }
    }
  },
  methods: {
    handleBottomChange(status) {
      //   console.log(status);
      this.bottomStatus = status;
    },
    loadBottom() {
      console.log("上拉加载更多");
      this.handleBottomChange("loading"); //上拉时 改变状态码
      this.page = ++this.page;
      // 真实请求
      //   this.getData().then(() => {
      //     this.$nextTick(() => {
      //       this.$refs.loadmore.onBottomLoaded();
      //     });
      //   });

      // 模拟请求
      setTimeout(() => {
        this.$nextTick(() => {
          this.handleBottomChange("loadingEnd");
          this.$refs.loadmore.onBottomLoaded();
          this.allLoaded = true; //模拟数据加载完毕 禁用上拉加载
        });
      }, 2000);
    },
    handleTopChange(status) {
      console.log(status);
      this.topStatus = status;
    },
    loadTop() {
      console.log("下拉刷新 ");
      this.handleTopChange("loading"); //下拉时 改变状态码
      this.page = 1;
      this.allLoaded = false; // 下拉刷新时解除上拉加载的禁用

      // 真实请求
      //   this.getData().then(() => {
      //     this.handleTopChange("loadingEnd"); //数据加载完毕 修改状态码
      //     this.$refs.loadmore.onTopLoaded();
      //   });

      // 模拟请求
      setTimeout(() => {
        this.handleTopChange("loadingEnd"); //数据加载完毕 修改状态码
        this.$refs.loadmore.onTopLoaded();
      }, 2000);
    },
    getData() {
      return this.$axios
        .get("/village/participationRate/page", {
          params: {
            page: this.page,
            limit: this.limit,
            status: 1,
            startDate:
              new Date(new Date().toLocaleDateString()).getTime() -
              24 * 60 * 60 * 1000,
            endDate: new Date(new Date().toLocaleDateString()).getTime(),
            subDistrictId: JSON.parse(localStorage.getItem("streets"))[0].id
          }
        })
        .then(() => {});
    },
    cancelPage() {
      // 给返回按钮重新绑定事件
      window.onpopstate = () => {
        // history.pushState(null, null, "/#/grid");
        location.href = location.origin + "/#/grid";
      };
    },
    swiperUser() {
      this.$router.push({
        path: "/select-street"
      });
    },
    selectTime() {
      this.$router.push({
        path: "/select-time"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#participation_rate {
  background: #ebebeb;
  width: 100vw;
  height: 100vh;
  padding: 0.71875rem /* 11.5/16 */ 0.53125rem /* 8.5/16 */ 0.5625rem /* 9/16 */
    0.53125rem /* 8.5/16 */;
  box-sizing: border-box;
  .avatar {
    //   width: 22.375rem /* 358/16 */;
    width: 100%;
    height: 5.59375rem /* 89.5/16 */;
    background-color: #fff;
    margin-bottom: 0.625rem /* 10/16 */;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .left {
      height: 100%;
      img {
        vertical-align: middle;
      }
      span {
        vertical-align: middle;
        margin-left: 0.75rem /* 12/16 */;
      }

      &::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
      }
    }
    .right {
      height: 100%;
      span {
        vertical-align: middle;
      }
      img {
        vertical-align: middle;
      }
      &::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
      }
    }
  }
  .participation {
    .ranking {
      width: 100%;
      height: 2.96875rem /* 47.5/16 */;
      background: #fff;
      border-bottom: 1px solid #ebebeb;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .ranking-left {
        height: 100%;

        span:first-of-type {
          display: inline-block;
          width: 0.5rem /* 8/16 */;
          height: 1.3125rem /* 21/16 */;
          background: #007aff;
          vertical-align: middle;
        }
        span:nth-of-type(2) {
          vertical-align: middle;
          margin-left: 0.625rem /* 10/16 */;
          font-weight: bold;
          font-size: 15px;
          color: #333;
        }
        &::after {
          content: "";
          display: inline-block;
          width: 0;
          height: 100%;
          vertical-align: middle;
        }
      }

      .ranking-right {
        height: 100%;
        input {
          vertical-align: middle;
          -webkit-appearance: none;
          border-radius: 0;
          border-radius: 0.5rem /* 8/16 */;
          background-color: #007aff;
          width: 3.3125rem /* 53/16 */;
          height: 1.75rem /* 28/16 */;
          border: none;
          color: #fff;
          font-weight: bold;
          font-size: 15px;
        }
        img {
          vertical-align: middle;
        }
        // span:first-of-type {
        //   display: inline-block;
        //   width: 0.5rem /* 8/16 */;
        //   height: 1.3125rem /* 21/16 */;
        //   background: #007aff;
        //   vertical-align: middle;
        // }
        // span:nth-of-type(2) {
        //   vertical-align: middle;
        //   margin-left: 0.625rem /* 10/16 */;
        // }

        &::after {
          content: "";
          display: inline-block;
          width: 0;
          height: 100%;
          vertical-align: middle;
        }
      }
    }
    .wrapper {
      width: 100%;
      height: 27.21875rem /* 435.5/16 */;
      // position: absolute;
      // top: 0;
      // bottom: 0;
      //   overflow: hidden;
      background: #fff;
      overflow: scroll;
      .mint-loadmore-top:first-of-type {
        margin-bottom: 20px;
        .mint-loadmore-text {
        }
      }
    }
  }
}
</style>