/ / to pack
npm install --save mescroll.js
/ / the main js introduction
//MescrollVue; // Pull up load, pull down refresh
import MescrollVue from 'mescroll.js/mescroll.vue'
Vue.component('mescroll-vue', MescrollVue);
// use in the page
<van-tabs type="card" :animated="true" @click="change_tab"> <van-tab title=" submitted "> <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit"> <ul V - show = "tab1_show" > < li v - for = "(item, index) in 5" : the key = "index" > < div > < p > single number: submitted < / p > < p > time: 2019/02/22 13:00</p> </div> <div> <span> 0.00 < / span > < / div > < / li > < / ul > < img class = "img SRC =" "@ img/ICONS / 7219 PNG" v - show = "!" Tab1_show "/> </mescroll-vue> </van-tab> <van-tab title=" complete "> <mescroll-vue ref="mescroll" :down="mescrollDown" Up ="mescrollUp" @init="mescrollInit"> <ul V-show ="tab2_show"> <li V-for ="(item,index) in 5" :key="index"> <div> <p> Complete < / p > < p > time: 2019/02/22 13:00 < / p > < / div > < div > < span > amount: 5.00 < / span > < span > fee: 0.00 < / span > < / div > < / li > < / ul > < img class = "img SRC =" "@ img/ICONS / 7219 PNG" v - show = "!" tab2_show"/> </mescroll-vue> </van-tab> </van-tabs> data() { return { mescroll: null, mescrollDown: { auto: false,}, mescrollUp: { callback: }, tab1_list:[], tab1_show:true,//tab1 tab2_list:[], Tab2_show :true,//tab2 data tab_active:0,// tab2 data tab_active:0}}, methods: {// tab_tab (index,name){if(index! = this.tab_active){ this.tab_active = index; } }, mescrollInit(mescroll) { this.mescroll = mescroll; }, upCallback(page, mescroll) {if(this.tab_active == 0){// This.$http.post('/ API /index/news_list', { type:this.tab_active, page: page.num, }).then(res => { if (res.status == 1) { let arr = res.data.list; if (page.num === 1) this.tab1_list = []; this.tab1_list = this.tab1_list.concat(arr); this.$nextTick(() => { mescroll.endSuccess(arr.length) }) if (this.tab1_list.length == 0) { this.tab1_show = false; }else{ this.tab1_show = true; } } }).catch((e) => { mescroll.endErr(); this.tab1_show = false; }); $http.post('/ API /index/news_list', {type:this.tab_active, page: page.num, }).then(res => { if (res.status == 1) { let arr = res.data.list; if (page.num === 1) this.tab2_list = []; this.tab2_list = this.tab2_list.concat(arr); this.$nextTick(() => { mescroll.endSuccess(arr.length) }) if (this.tab2_list.length == 0) { this.tab2_show = false; }else{ this.tab2_show = true; } } }).catch((e) => { mescroll.endErr(); this.tab2_show = false; }); }}},Copy the code