[JavaScript知识库]mescroll-vue下拉上拉刷新的使用

1. 执行npm命令安装mescroll

npm install --save mescroll.js

2. 引入mescroll组件

import MescrollVue from 'mescroll.js/mescroll.vue'

3.注册组件

components: {
    MescrollVue
  },

4.图片展示

5. 页面示例代码

<template>
  <div>
    <!-- 这个是不带tab切换的xaila上拉刷新-->
    <!-- 1.修改请求路径 参数
         2.可以在created里面请求看一下是否成功  然后在将上拉下拉刷新请求修改  在查看属性渲染数据据 
         3.csss要npm下载less
    -->
    <demo-section>
      <mescroll-vue ref="mescroll0" :down="getMescrollDown(0)" :up="getMescrollUp(0)" @init="mescrollInit0">
        <ul class="itemlist" id="itemlist0">
          <li class="card" v-for="item in pending.data" :key="item.oafdUuid">
            <router-link :to="{name: 'vehicle-apply-new', query: {name: item}}">
              <div class="card-body">
                <span class="tag tag-blue">{{ getType(item, 'text') }}</span>
                {{ item.oafdFilesenddepname }}
              </div>
              <div class="card-footer">
                <span>{{ item.oafdCusrname }}</span
                ><i class="time">{{ item.oafdCdate | formatDate('yyyy-M-d hh:mm') }}</i>
              </div>
            </router-link>
          </li>
        </ul>
      </mescroll-vue>
    </demo-section>
  </div>
</template>
<script>
// 引入mescroll的vue组件
import MescrollVue from 'mescroll.js/mescroll.vue'
import {getFiledispatchList} from '@/api/official-review.js'
export default {
  components: {
    MescrollVue
  },
  data() {
    return {
      pending: {
        mescroll: null,
        isListInit: false,
        data: [],
        recordcount: 0
      },
      waitCount: 0
    }
  },
  beforeRouteEnter(to, from, next) {
    // 如果是从表单详情或新建表单返回 则回写当前类型
    let theType
    let waitCount
    // 通过你跳转的详情页路径判断
    if (from.name == 'official-send-view') {
      theType = localStorage.getItem('listTabType') || 0
      waitCount = localStorage.getItem('waitCount') || 0
    } else {
      theType = 0
      waitCount = 0
    }
    next(vm => {
      console.log(vm)
      setTimeout(() => {
        vm.tabType = theType
        vm.waitCount = waitCount
        vm.tabChange(theType)
      })
    })
  },
  beforeRouteLeave(to, from, next) {
    // 如果是进入表单详情或新建表单 则保存当前的类型 否则清空
    // 通过你跳转的详情页路径判断
    if (to.name == 'official-send-view') {
      localStorage.setItem('listTabType', this.tabType)
      localStorage.setItem('waitCount', this.waitCount)
    } else {
      localStorage.removeItem('listTabType')
      localStorage.removeItem('waitCount')
    }
    next()
  },
  methods: {
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit0(mescroll) {
      mescroll.tabType = 0
      this.pending.mescroll = mescroll
    },
    // 多mescroll的配置,需通过方法获取,保证每个配置是单例
    getMescrollDown(tabNum) {
      let wrapId = 'itemlist' + tabNum
      return {
        auto: false,
        callback: this.downCallback,
        empty: {
          warpId: wrapId,
          tip: '— 暂无更多数据 —'
        }
      }
    },
    getMescrollUp(tabNum) {
      let wrapId = 'itemlist' + tabNum
      return {
        auto: false,
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
        htmlNodata: '<p class="upwarp-nodata">— 暂无更多数据 —</p>', //无数据的布局
        noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        page: {
          num: 0,
          size: 15
        },
        empty: {
          warpId: wrapId,
          tip: '— 暂无更多数据 —'
        }
      }
    },
    downCallback(mescroll) {
      // 这里加载你想下拉刷新的数据, 比如刷新sent的轮播数据
      if (mescroll.tabType == 0) {
        // loadSwiper();
      } else if (mescroll.tabType == 1) {
        // ....
      } else if (mescroll.tabType == 2) {
        // ....
      }
      mescroll.resetUpScroll() // 触发下拉刷新的回调,加载第一页的数据
    },
    /* 上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
    upCallback(page, mescroll) {
      mescroll.endByPage(page.num * page.size, page.num)
      let currentTab
      if (mescroll.tabType == 0) {
        //   这里可以打印出请求的参数
        //   console.log(this.pending);
        currentTab = this.pending
        currentTab.isListInit = true // 标记列表已初始化,保证列表只初始化一次
        getFiledispatchList({
          // 上拉要传的参数
          'page.start': String(page.num == 1 ? 0 : currentTab.data.length),
          'page.limit': '10',
          'strMap.type': 'pending',
          'strMap.searchKeyWords': '',
          'strMap.postType': 'dd'
        })
          .then(response => {
            this.waitCount = response.recordcount || 0
            if (response.success && response.data.length == 0) {
              if (page.num == 1) {
                currentTab.data = []
                currentTab.recordcount = 0
              }
            }
            if (response.success && response.data.length > 0) {
              const arr = response.data
              currentTab.recordcount = response.recordcount || 0
              if (page.num == 1) {
                currentTab.data = []
              }
              currentTab.data = currentTab.data.concat(arr)

              this.$nextTick(() => {
                mescroll.endSuccess(currentTab.recordcount)
              })
            } else {
              mescroll.endDownScroll()
              mescroll.endUpScroll(true)
            }
          })
          .catch(e => {
            console.log(e)
            mescroll.endErr()
          })
      }
    },
    // 切换菜单
    tabChange(name) {
      let newTab = this.getTabData(name) // 新转换的列表
      if (!newTab.isListInit) {
        newTab.mescroll.triggerDownScroll() // 加载列表
      }
    },
    // 获取菜单对应的数据
    getTabData(tabNum) {
      if (tabNum == null) tabNum = this.tabNum
      if (tabNum == 0) {
        return this.pending
      } else if (tabNum == 1) {
        return this.deal
      } else {
        return this.done
      }
    },
    // 获取每条数据对应的参数
    getType(data, prop, tabType) {
      console.log(data, prop, tabType)
      const typeObj = {
        text: '发文管理',
        name: 'official-send-view',
        query: {
          uuid: data.oafdUuid,
          hideBtn: tabType != '0' ? 'yes' : 'no',
          openType: 1
        }
      }
      return typeObj[prop]
    }
  }
}
</script>
<style lang="less" scoped>
.mescroll {
  position: fixed;
  top: 44px;
  bottom: 0;
  height: auto;
}
.mescroll-padding {
  bottom: 48px;
}
/deep/ .mescroll-upwarp {
  min-height: 20px;
  line-height: 20px;
  padding: 8px 0;
}
/deep/ .mescroll-upwarp .upwarp-nodata {
  font-size: 12px;
  color: rgba(25, 31, 37, 0.56);
}
/deep/ .mescroll-empty {
  min-height: 20px;
  line-height: 20px;
  padding: 8px 0;
  .empty-tip {
    margin-top: 0;
    font-size: 12px;
    color: rgba(25, 31, 37, 0.56);
  }
}
// 选项卡
/deep/ .van-tabs {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  top: 0;
}
/deep/ .van-tab {
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.4);
}
/deep/ .van-tab--active {
  color: rgba(50, 150, 250, 1);
}

// 列表
.itemlist {
  padding: 8px;
  .card {
    padding: 14px 8px 14px 16px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(25, 31, 37, 0.04);
    border-radius: 3px;
    .tag {
      margin-right: 5px;
      padding-left: 6px;
      padding-right: 16px;
      display: inline-block;
      min-width: 68px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #fff;
      box-sizing: border-box;
      vertical-align: middle;
      &.tag-blue {
        background: url('../../assets/official-review/tag-blue.png');
        background-size: 100% 100%;
      }
      &.tag-gray {
        background: url('../../assets/official-review/tag-gray.png');
        background-size: 100% 100%;
      }
    }
    .card-body {
      margin-bottom: 5px;
      min-height: 40px;
      line-height: 20px;
      font-size: 15px;
      color: rgba(25, 31, 37, 1);
    }
    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 16px;
      font-size: 12px;
      color: rgba(25, 31, 37, 0.4);
      span {
        margin-right: 10px;
        flex: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      i {
        font-style: normal;
      }
    }
  }
  .card + .card {
    margin-top: 8px;
  }
}
// 筛选
.filter-panel {
  padding-top: 44px;
  .filter-title {
    padding: 12px 16px 7px;
    line-height: 21px;
    font-size: 15px;
    color: rgba(25, 31, 37, 1);
    box-sizing: content-box;
  }
  .filter-body {
    ul {
      padding: 0 12px 18px;
      display: flex;
      flex-wrap: wrap;
    }
    li {
      padding: 5px 4px;
      flex-basis: 33.33%;
      box-sizing: border-box;
    }
    p {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 34px;
      font-size: 14px;
      background: rgba(25, 31, 37, 0.04);
      color: rgba(25, 31, 37, 0.72);
      border: 1px solid rgba(151, 151, 151, 0.04);
      border-radius: 3px;
      text-align: center;
      &.active {
        color: rgba(50, 150, 250, 1);
        border: 1px solid rgba(50, 150, 250, 1);
        background: rgba(50, 150, 250, 0.04);
      }
    }
  }
  .filter-footer {
    display: flex;
    button {
      margin: 0;
      padding: 0;
      display: flex;
      flex-basis: 50%;
      height: 44px;
      font-size: 17px;
      justify-content: center;
      align-items: center;
      border: none;
      outline: none;
    }
    .btn-reset {
      color: rgba(50, 150, 250, 1);
      background: rgba(50, 150, 250, 0.08);
    }
    .btn-confirm {
      color: rgba(255, 255, 255, 1);
      background: rgba(50, 150, 250, 1);
    }
  }
}
</style>