vux (scroller)上拉刷新下拉加载更多
Posted Tiac
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vux (scroller)上拉刷新下拉加载更多相关的知识,希望对你有一定的参考价值。
1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性
<scroller :lockX=true height="-170" :pulldown-config="{downContent: ‘下拉刷新‘, upContent: ‘释放后更新‘}" :pullup-config="{upContent:‘上拉加载更多‘, downContent: ‘释放后加载‘}" ref="myScroller" :use-pulldown=true :use-pullup=true @on-pulldown-loading="pageNo = 1;getArticleList(1, catId)" @on-pullup-loading="getArticleList(1, catId)"> </scroller>
如上,我加一个叫 myScroller 的 ref 属性,下面可以通过这个东西来调用组件的方法
2)上拉刷新,下拉加载(let _this = this)
if (data.Code !== 0) return false if (_this.pageNo === 1) { _this.ArticleList = data.Result.ArticleList _this.$nextTick(() => { _this.$refs.myScroller.donePulldown() _this.$refs.myScroller.reset({top: 0}) }) } else { let _count = _this.ArticleList.length for (var i = data.Result.ArticleList.length - 1; i >= 0; i--) { _this.ArticleList[_count + i] = data.Result.ArticleList[i] } _this.$nextTick(() => { _this.$refs.myScroller.donePullup() _this.$refs.myScroller.reset() }) }
完
以上是关于vux (scroller)上拉刷新下拉加载更多的主要内容,如果未能解决你的问题,请参考以下文章
iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战