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.npm install less less-loader --save
    -->
    <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)
      })