mui上拉加载前端和PHP后端,vue2+mui实现上拉刷新下拉加载

# mui+vue2.0 实现上拉刷新下拉加载

> 来源: http://banyingli.cn/?p=92

#### HTML

```html

• {{item.title}}

```

#### JavaScript

```javascript

var demo = new Vue({

el: '#pullrefresh',

data: {

count : 0,

items : [{title: 'item1'}]

},

methods: {

pulldownRefresh : function(){

setTimeout(function() {

var addedArray = [];

for (var i = demo.items.length + 1, len = i + 3; i < len; i++) {

addedArray.push({title: 'item'+i});

}

demo.items = addedArray.concat(demo.items);

mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed

}, 1000);

},

pullupRefresh: function(){

setTimeout(function() {

var addedArray = [];

for (var i = demo.items.length + 1, len = i + 4; i < len; i++) {

addedArray.push({title: 'item'+i});

}

demo.items = demo.items.concat(addedArray);

mui('#pullrefresh').pullRefresh().endPullupToRefresh();

}, 1000);

}

}

});

mui.init({

pullRefresh: {

container: '#pullrefresh',

down: {

contentrefresh: '正在下拉...',

callback: demo.pulldownRefresh

},

up: {

contentrefresh: '正在加载...',

callback: demo.pullupRefresh

}

}

});

```