zoukankan      html  css  js  c++  java
  • 在vue中运用mt-loadmore 实现上拉加载,下拉刷新(完整源码)

    <template>
      <div class="serverList">
        <ul class="scrollModeBox" :style="{'-webkit-overflow-scrolling': scrollMode,height: wrapperHeight + 'px'}">
          <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false" :bottom-all-loaded="allLoaded"
                       ref="loadmore" @top-status-change="handleTopChange" @bottom-status-change="handleBottomChange">
            <li class="bbb" v-for="item in playList" :key="item.index" @click="toRepairDetails(item.pkBill)">
              <p class="content">{{item.content}}</p>
              <p class="time">上报日期:{{item.submitTime}}</p>
              <p class="status red" v-if="item.billState === 'UNTREATED'">{{item.billStateValue}}</p>
              <p class="status orange" v-if="item.billState === 'IN_PROGRESS'">{{item.billStateValue}}</p>
              <p class="status orange" v-if="item.billState === 'SERVICE_COMPLETED'">{{item.billStateValue}}</p>
              <p class="status blue2" v-if="item.billState === 'RETURN_VISIT_COMPLETED'">{{item.billStateValue}}</p>
            </li>
    
            <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"></mt-spinner>-->
              <span class="mint-loadmore-text">{{ topText }}</span>
            </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"></mt-spinner>-->
              <span class="mint-loadmore-text">{{ bottomText }}</span>
            </div>
          </mt-loadmore>
        </ul>
    
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            playList: [],
            pageNum: 1,
            pageSize: 4,
            topStatus: '',
            bottomStatus: '',//底部上拉加载状态
            allLoaded: false,
            scrollMode: 'auto',
            haveMore: true,
            // 下拉刷新
            topText: '',
            topPullText: '下拉刷新',
            topDropText: '释放更新',
            topLoadingText: '加载中...',
            bottomText: '',
            bottomPullText: '上拉刷新',
            bottomDropText: '释放更新',
            bottomLoadingText: '加载中...',
            wrapperHeight: 0,//容器高度
    
          }
        },
        mounted() {
          //获取屏幕宽度
          this.wrapperHeight = document.documentElement.clientHeight;
          // 报修记录
          let vm = this;
          vm.toServerList();
        },
        watch: {
          topStatus(val) {
            switch (val) {
              case 'pull':
                this.topText = this.topPullText;
                break;
              case 'drop':
                this.topText = this.topDropText;
                break;
              case 'loading':
                this.topText = this.topLoadingText;
                break;
            }
          },
          bottomStatus(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: {
          toServerList() {//跳转到投诉页面。
            const _this = this;
            _this.$Indicator.open({
              text: '加载中',
              spinnerType: 'fading-circle'
            });
            _this.postRequest('', {
              pageNum: _this.pageNum,
              pageSize: _this.pageSize,
            }, function (data) {
              _this.$Indicator.close();
              if (data) {
                _this.playList = data.datas;
                // 判断上拉刷新,下拉加载.
                if (_this.pageNum < data.pages) {
                  // 当页面相同时,最后一页弹窗提示。
                  _this.haveMore = true;
                  _this.pageNum = data.pageNum;
                } else {
                  _this.haveMore = false;
                }
                if(_this.pageNum>1){
                  _this.isHaveMore(_this.haveMore)
                }
                _this.$nextTick(function () {
                  _this.scrollMode = 'touch';
                })
              } else {
    // 此处需要加一个全局的类名,修改Toast 否则可能会报错 _this.$Toast({ message: '暂无记录', duration: 2000, className: 'noticeErrorToast' }); } }) setTimeout(function () { _this.$Indicator.close(); }, 5000); }, handleTopChange(status) { this.topStatus = status; }, handleBottomChange(status) { this.bottomStatus = status; }, loadTop() { // 下拉刷新数据 this.handleTopChange("loading");//下拉时 改变状态码 this.pageNum = 1; this.allLoaded = false;//下拉刷新时解除上拉加载的禁用 // 查询数据 this.toServerList(); this.$refs.loadmore.onTopLoaded(); }, loadBottom() { // 上拉加载 this.more(); this.allLoaded = true; this.handleBottomChange("loadingEnd");//数据加载完毕 修改状态码 this.$refs.loadmore.onBottomLoaded(); }, more() { const _this = this; _this.handleBottomChange("loading");//上拉时 改变状态码 _this.pageNum = parseInt(_this.pageNum) + 1; console.log(this.pageNum, '1111') this.toServerList(); }, isHaveMore(isHaveMore) { this.allLoaded = true; // true 是禁止上拉加载; if (isHaveMore) { //isHaveMore 为true 有下一页,不禁止上拉 this.allLoaded = false } else { //false 没有下一页,禁止下拉,默认为true this.$Toast({ message: '没有更多了', duration: 2000, className: 'noticeErrorToast' }); this.allLoaded = true; return; } }, toRepairDetails(id) { this.$router.push({ path: '/complaindetails', query: {id: id} }) } } } </script> <style scoped> /*状态的判断*/ .red { color: red; } .orange { color: #F69203; } .blue2 { color: #0585C8; } .yellow { color: yellow; } .current { background-color: #fff; color: #0585C8; } .serverList { 100%; /* height: 100%; */ background-color: #f2f2f2; padding-bottom: 20px; } .serverList ul { padding-top: 10px; } .serverList ul li { box-sizing: border-box; background-color: #fff; margin: 40px 26px 0 26px; border-radius: 10px; padding: 34px 23px; } /*待处理状态*/ .serverList ul li .status { font-size: 28px; text-align: right; height: 60px; line-height: 60px; padding-top: 8px; box-sizing: border-box; padding-right: 20px; } /*报修内容*/ .serverList ul li .content { font-size: 28px; 550px; color: #333; text-align: left; margin-left: 30px; line-height: 48px; } /*上报时间*/ .serverList ul li .time { text-align: left; font-size: 24px; color: #999; margin: 10px 0 0 30px; padding-bottom: 20px; } .load-more-normal { text-align: center; line-height: 60px; } .load-more-hide { height: 0; } </style>

      

  • 相关阅读:
    240个jQuery插件
    MySQL的mysqldump工具导入导出数据库
    [js脚本实现]图片向上滚动并且有停顿的特效
    linux 下常用查看Apache状态语句
    小命令说明
    Linux下Tomcat的启动、关闭、杀死进程
    POJ 数学题目
    2013421 心灵感悟
    证书创建工具 (Makecert.exe)
    有的句子不长,却能鼓舞我们,成为我们坚持下去的动力
  • 原文地址:https://www.cnblogs.com/panax/p/11806913.html
Copyright © 2011-2022 走看看