码迷,mamicode.com
首页 > 其他好文 > 详细

vux (scroller)上拉刷新、下拉加载更多

时间:2017-03-10 17:41:48      阅读:5400      评论:0      收藏:0      [点我收藏+]

标签:log   eset   top   pull   use   --   next   let   code   

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)上拉刷新、下拉加载更多

标签:log   eset   top   pull   use   --   next   let   code   

原文地址:http://www.cnblogs.com/tujia/p/6531539.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!