vuejs+mui实现移动端上拉加载更多

对mui框架里面的上拉加载更多方法进行改造，能实现结合vuejs使用
效果图：

html结构

<div id="dataList" class="testdata">
	<!--这个div不可缺，滚动容器-->
   <div>
		<ul id="showdata" class="tablelist">
			<li v-for="(item,index) in dataList" :key="'a'+index">{{item.name}}</li>
		</ul>
    </div>
</div>

css样式

.testdata {
    position: absolute;
    top: 128px;/*上面banner的高度*/
    left: 0;
    width: 100%;
}
.tablelist li {
    position: relative;
    padding: 0 10px;
    height: 44px;
    line-height: 44px;
    display: flex;
    text-align: center;
    align-items: center;
    color: #333;
    box-sizing: border-box;
}
/*列表底部边框移动端1px细边框*/
.tablelist li::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #c8c7cc;
}

js

var vm = new Vue({
		el: '#app',
		data: {
			dataList:null,//分页请求后得到的数据
			pageNum:1,//当前页码
			pageSize:10,//总条数
			isOver:false,//状态标识 是否加载完数据
			_startLimit:10//实际请求条数
		},
		methods:{
			initPull(){
				// 列表上拉加载
				this._startLimit = this.pageNum*this.pageSize;
				var _self = this;
				mui.init({
				  pullRefresh : {
				    container:'#dataList',
				    up : {
				      height:50,//可选.默认50.触发上拉加载拖动距离
				      auto:true,//可选,默认false.自动上拉加载一次
				      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
				      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
				      callback :function(){
						setTimeout(function() {
							mui('#dataList').pullRefresh().endPullupToRefresh((_self.isOver));
							_self.pullUpfresh();
							console.log(2)
						}, 500);
						} 
				    }
				  }
				});
			},
			pullUpfresh(){
				var para = {
					"city":'长沙市',
					"status": 0,
					"newType": 2,
					"page": this.pageNum,
					"rows": this._startLimit
				}
				//这里请求使用了axios 和Qs需要引入插件 改成jq 的ajax 一样，就是数据请求接口
				axios({
					url: baseurl+ '/site/getSiteByCondition',
					method: 'post',
					data: Qs.stringify(para)
				}).then(res => {
					if (res.data.statusCode == "200") {
						this.dataList = res.data.rows;
						//判断当前页码是否与最大页码数一致，如果一致则标识为true
						var maxPage = Math.ceil(res.data.total/this.pageSize);
						if(this.pageNum==maxPage){
							this.isOver = true;
						}
						//请求下一页做准备
						if(this.isOver == false){
							this.pageNum++;
						}
					}else{
						mui.toast(res.data.message);
					}
				})	
			}
		},
		created(){
			this.initPull();
		}

传统的项目结构使用了mui框架，对于一个想用vue的双向数据绑定的前端来说，只能这样结合了
UI总是为难我系列~~o(╥﹏╥)o