这是我在作一个demo的一个上垃加载下拉刷新功能时所遇到的问题,因为伤了好一会脑筋,因此留下这篇笔记以供后续查询;javascript
在上代码前建议在开发项目时不要优先选择vux这个框架,由于有一些经常使用的功能组件官方已再也不更新,固然若是你的项目中没有那些功能的话,这个框架的确是一个不错的选择,或者说用别的框架代替vux官方放弃的功能,也是能够的,具体看我的吧!java
先说说我遇到的问题吧:其实问题就一个,就是上拉加载的问题。api
一、一开始我是用该组件的@on-scroll-bottom触发方法实现数据加载,此方法由该组件的scroll-bottom-offset属性触发,官方文档上说明这个方法会触发屡次,我想着用一个状态去禁止多吃触发,结果失败了,果断换了另外一个方法,即@on-pullup-loading。框架
二、@on-pullup-loading这个方法是能够实现的,不过有几个注意点须要格外注意,由于这个方法只触发一次,那么怎么让它能够屡次执行呢。。。。 嘿嘿!! 上代码先this
loadMore () { this.pageNum ++; this.getNewsList(false);
},
refresh () {
this.pageNum = 1;
this.getNewsList(true)
},
getNewsList (type) { this.showloading = true let param = { pageSize:10, pageNum:this.pageNum, type: parseInt(this.tabType) } api.getSearchList(param).then(res => { if(res.data.list.length == 0){ this.isScrollerShow = false; } this.isDataShow= true; // type == undefined 表示为刷新或者是初始化 type = false 表示加载更多 if( type == false){ for(let item of res.data.list){ this.list.push(item) } // 判断是否还有数据 if(res.data.list.length < param.pageSize){ // 没有就显示底线以及禁用上拉 this.isEnd = true;
// 没有数据时这里要禁止调上拉组件,否则会一直显示在加载中 this.status.pullupStatus = 'disabled' }else{ // 还有数据就开启上拉,并重置 这里必定要设置 pullupStatus为default 不然下拉组件会一直显示加载中 this.status.pullupStatus = 'default' } return; }else if( type == true ){
this.$refs.scroller.enablePullup() // 启用上拉组件 ==》 这步极关键,不然下拉刷新后再上拉无效
this.$nextTick( ()=> {
this.$refs.scroller.donePulldown()
})
} // 如下为下拉刷新或初始化
this.isLoadMoreShow = false; this.isScrollerShow = true; this.list = res.data.list;
this.isEnd = false;
}) },
好吧!大体就记得这么多了,但愿能帮主到人,若是有问题能够留言,可是不对的话请勿喷!!!spa