vue2.0 Mobile, drop-down refresh, pull-up load more plugins, modified version

In the "implementation of the rich" plug-in base modification "vue2.0 mobile, drop-down refresh, pull load more plugins",

1. Modify load to tail page, return to top refresh data, cannot continue to aggravate next page

2. Modify the loading complete text prompt

Original link: http://www.cnblogs.com/sichaoyun/p/6647458.html

<template lang= "html" > <div class= "yo-scroll": class= "{' Down ':(state===0), ' up ':(state==1), refresh: (state= ==2), touch:touching} "@touchstart =" Touchstart ($event) "@touchmove =" Touchmove ($event) "@touchend =" touchend ($event) "@scroll =" (Oninfinite | | infiniteloading)? Onscroll ($event): undefined "> <section class=" inner ": style=" {transform: ' Translate3d (0, ' + top + ' px, 0) '} "&      Gt 
Copy the above components, save the Vue file Pull-refresh.vue into your Component/common folder, and then introduce to the page, the following is a quote demo
<template> <div class= "Home" > <v-scroll:on-refresh= "Onrefresh": on-infinite= "Oninfinite": Loading-te      xt= "Loadingtext" > <ul class= "List" > <li v-for= "item in Articlelist" >{{item.title}}</li> </ul> </v-scroll> </div></template><script> Import {ajaxplugin, Xbutton,group, Ce ll, XInput} from ' Vux ' import Scroll from '. /..  /common/pull-refresh '; Export Default {name: ' Home ', components: {' v-scroll ': Scroll, Group, Xbutton, Cell, XINP UT, ajaxplugin}, data () {return {articleList:this.getArticleList (1), Loadingtext: ' In Load '. . ', counter:1,//Current page num:20,//show how many strips listdata: [],///drop-down update data storage array Downdata: []//Pull more    Multiple data Storage Array}}, Mounted:function () {//this.getarticlelist (); }, Methods: {getarticlelist:function (catId) {Let _this = this getDate ('/index.php ', {params:{m: ' Jsonp ', C: ' Index ', A: ' Lists ', catid:59}},function (data) {Let arr = data.result.data;          _this.articlelist=arr;          if (arr.length>=_this.num) {_this.counter++;        }}) return []}, Onrefresh (done) {let VMS = this;        vm.loadingtext= ' Loading ... '; GetDate ('/index.php ', {params:{m: ' Jsonp ', C: ' Index ', A: ' Lists ', catid:59}},function (data) {Let arr = Data.result.data          ;          Vm.articlelist=arr;          if (arr.length>=vm.num) {vm.counter=2;        } done ()//Call Do})}, Oninfinite (done) {let VMS = this; GetDate ('/index.php ', {params:{m: ' Jsonp ', C: ' Index ', A: ' Lists ', catid:59,page:vm.counter}},function (data) {Let arr =          Data.result.data;          Vm.articlelist=vm.articlelist.concat (arr);            if (arr.length<vm.num) {vm.loadingtext= ' load complete ... ';            VMs. $el. Queryselector ('. Load-more '). style.display = ' None '; Return;          }else{vm.counter++; } do ()//Call Done}}}} function GetDate (URL,PARAMS,FN) {ajaxplugin. $http. Get (URL, PA     Rams). Then ((response) = {if (FN) fn (Response.data)})} function htttprequest (URL, params, CB) { Let Datastr = "for" (let key in params) {datastr + = key + ' = ' + Params[key]} datastr = Datastr.substr    (0, Datastr.length-1) console.log (DATASTR); Ajaxplugin. $http. Post (URL, params). Then ((response) = {if (CB) CB (RESPONSE.DATA)})}</script&gt ;<!--Add "scoped" attribute to limit CSS-component only--><style scoped> H1, H2 {Font-weight:n  Ormal;    } ul {List-style-type:none;  padding:0;    } li {flex:1;    margin:10px;  Border-bottom: #ddd solid 1px;  } A {color: #42b983; }</style>
　　
vue2.0 Mobile, drop-down refresh, pull-up load more plugins, modified version