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

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

MUI 组件地址：

https://dev.dcloud.net.cn/mui/ui/

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();
		}

vue实现移动端上拉加载更多

### 注意：容器必须要有固定的高度
 <!-- 容器 -->
 <div ref="cont" @scroll.passive="scrollEvent"></div>

js

export default {
  name: "Demo",
  data() {
    return {
        flag :0,    // 定义一个flag变量 充当节流阀
        wait:1000,    // 定义一个wait变量 延迟多长时间触发
    };
  },
  methods: {
    // 滚动事件
    scrollEvent() {
      // 获取容器盒子的dom
      let cont= this.$refs.cont;
      // 判断滚动条距离容器底部的位置 当滚动条距离容器底部只有5像素时触发
      if (cont.scrollHeight - cont.scrollTop - 5 <= cont.clientHeight) {
        if (flag) return;
        flag = 1; // 执行完一次后 关闭节流阀
 
        // setTimeout 根据个人需求来定 
        setTimeout(() => {
          // 需要执行的操作 执行完成后开启节流阀flag = 0;
          // 如果不需要在进行操作 flag无需改变或者flag = 1;
        }, wait);
      }
    },
  },
};