上拉刷新和下拉刷新

首先要在mui.init()裏面定義

mui.init({
  pullRefresh : {
    container:"#refreshContainer",//下拉刷新容器標識，querySelector能定位的css選擇器都可，好比：id、.class等
    down : {
      style:'circle',//必選，下拉刷新樣式，目前支持原生5+ ‘circle’ 樣式
      color:'#2BD009', //可選，默認「#2BD009」 下拉刷新控件顏色
      height:'50px',//可選,默認50px.下拉刷新控件的高度,
      range:'100px', //可選 默認100px,控件可下拉拖拽的範圍
      offset:'0px', //可選 默認0px,下拉刷新控件的起始位置
      auto: true,//可選,默認false.首次加載自動上拉刷新一次
      callback :pullfresh-function //必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據；
    }
  }
});

在vue裏定義所須要的變量,可給默認值

var vm = new Vue({
	el: '.mui-content',
	data: function() {
		return {
			code: 'tuijian',
			max_time: 0,
			min_time: 0,
			articles: [],
			category_articles: {},
		};
	},

而後在method裏寫上拉和下拉的方法,若是最大時間==0,就把當前時間賦值被最大時間,而後去拼接字符串拿到url地址,若是新拿到的數據的時間段比原來的最大時間大,就證實拿到了新的數據,把新的數據的時間段賦值給最大時間,最後要結束刷新操做.

pull_down_refresh: function(cb) {
			if (this.max_time == 0) {
				this.max_time = new Date().getTime();
			}
			var url = 'http://api.toutiao.axita.com.cn/content/list?tag=' + this.code +
				'&max_time=' + this.max_time;
			console.log(url);
			mui.get(url, function(res) {
				(res.data.list || []).forEach(function(i) {
					if(this.max_time < i.publish_time) {
						this.max_time = i.publish_time;
					}
					vm.articles.splice(0, 0, i);
				});
				mui('#refreshContainer').pullRefresh().endPulldown();
				cb && cb();
			}, 'json');
		},

上拉加載方法,若是最小時間==0,就把最新時間賦值給最小時間,而後拼接字符串拿到url地址,若是拿到的新數據的時間段比最小時間短還小,就證實拿到了新的數據,把新的時間賦值給最小時間,最後結束刷新動做.

pull_up_refresh: function(cb) {
			if (this.min_time == 0) {
				this.min_time = new Date().getTime();
			}
			var url = 'http://api.toutiao.axita.com.cn/content/list?tag=' + this.code +
				'&min_time=' + this.min_time;
			console.log(url);
			mui.get(url, function(res) {
				(res.data.list || []).forEach(function(i) {
					if(this.min_time > i.publish_time) {
						this.min_time = i.publish_time;
					}
					vm.articles.push(i)
				});
				mui('#refreshContainer').pullRefresh().endPullup();
				cb && cb();
			}, 'json');
		}

頁面加載好的時候要下拉刷新一下

mui.ready(function() {
	vm.pull_down_refresh(function() {
		setTimeout(function(){
			plus.navigator.closeSplashscreen();
		}, 300);
	});
});