上拉刷新和下拉刷新

首先要在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);
	});
});