mescroll_

Mescroll是一个功能强大的JavaScript框架，专门用于实现下拉刷新和上拉加载功能，它支持Vue.js，不依赖jQuery或Zepto，并且可以在多个平台上运行，包括Android、iOS、手机浏览器以及PC主流浏览器，Mescroll的Uni-app版本（mescroll-uni）是专为uni-app设计的组件，支持一套代码编译到iOS、Android、H5、小程序等多个平台。

功能亮点

Mescroll提供了多种实用的功能，例如自动处理分页、控制无数据时的空布局提示、回到顶部按钮等，它还允许在一个界面中支持多个下拉刷新和上拉加载操作，并可以临时锁定这些操作。

快速入门

要使用Mescroll，需要先引用mescroll.min.css和mescroll.min.js文件，然后创建一个包含列表内容的HTML结构，通过JavaScript创建MeScroll对象，并配置下拉刷新和上拉加载的回调函数。

参数自由搭配

Mescroll允许用户自由搭配参数，以实现个性化定制，可以指定列表滚动的位置、是否自动加载下一页数据等。

丰富的案例

Mescroll提供了丰富的案例供开发者参考，包括基础案例、中级案例和高级案例，还有详细的注释和API文档，帮助开发者快速上手。

组件选择

对于uni-app用户来说，可以选择使用mescroll-uni或mescroll-body组件。mescroll-body是较新的版本，支持原生组件且性能更好，但仅在特定情况下考虑使用mescroll-uni。

以下是一个简单的示例代码片段：

<template>
  <view class="box">
    <view class="tab_box">
      <view class="tab_list" :class="tab_index===index?'tab_on':''" v-for="(item,index) in tab_list" @click="tabChange(index)">{{item}}</view>
    </view>
    <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="refreshChange" @up="loadChange" :down="down" :up="up" :fixed="true" :top="80">
      <block v-for="(item,index) in list" :key='index' >
        <view class="list">
          <view class="name">{{item.name}}</view>
          <view class="value">{{item.value}}</view>
        </view>
      </block>
    </mescroll-uni>
  </view>
</template>

import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
export default {
  name: "approval-temp",
  data(){
    return{
      mescroll:null,
      up:{
        auto:false //默认开始不执行上拉
      },
      down:{
        auto:false //默认开始不执行下拉
      },
      list:[],
      hasNext:true,  //上拉是否有值
      tab_list:['索隆','山治'],
      tab_index:0
    }
  },
  mixins:[MescrollMixin], //引入mescroll内置方法
  components:{
    MescrollUni
  },
  mounted() {
    let list=[]
    let tmp1={
      name:'多弗朗明哥',
      value:'100'
    }
    let tmp2={
      name:'路飞',
      value:'99'
    }
    for(let i=0;i<5;i++){
      let new_tmp1=JSON.parse(JSON.stringify(tmp1))
      let new_tmp2=JSON.parse(JSON.stringify(tmp2))
      new_tmp1.name+=i
      new_tmp2.name+=i
      list.push(new_tmp1,new_tmp2)
    }
    this.list=list
  },
  methods:{
    mescrollInit(mescroll) {
      console.log('mescrollInit')
      this.mescroll = mescroll;
    },
    refreshChange(data={}){
      console.log('refresh')
      this.mescroll.removeEmpty()  //移除空布局，主要是第一次无值，第二次有值
      this.mescroll.showUpScroll()//显示上拉加载，主要用于标签1加载完END，切换标签2时默认替换END(有切换标签时调用)
      this.list=[]
      this.hasNext=true  //初始化有值
      this.page_no=1
      this.getList(data);
    },
    loadChange(){
      console.log('load')
      this.page_no++
      this.getList();
    },
  }
}