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)上拉刷新、下拉加载更多的更多相关文章

  1. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  2. Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表

    本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...

  3. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

  4. Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

    随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...

  5. Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  6. 微信小程序 上拉刷新/下拉加载

    小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...

  7. ListView上拉刷新和分页加载完整的Dome

    很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...

  8. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  9. 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...

  10. 第三方 XListview 上拉加载、下拉刷新、分页加载和Gson解析

    注意:此Demo用的是第三方的Xlistview.jar,需要复制me文件夹到项目中,两个XML布局文件和一张图片 把下面的复制到String中 <string name="xlist ...

随机推荐

  1. MongoDB 运行状态、性能监控,分析

    这篇文章的目的是让你知道怎么了解你正在运行的Mongdb是否健康.转载自http://tech.lezi.com/archives/290 mongostat详解 启动mongodb监控,通过下面命令 ...

  2. [hbase] HBase内置过滤器的一些总结

    http://blog.csdn.net/cnweike/article/details/42920547

  3. Three ways to make your WPF images pop out on MouseOver

    There are a couple of ways in WPF to make an image pop out when moving mouse over it. Of course we w ...

  4. Sanjeev Arora

    中文名:桑吉弗 阿罗拉 个人主页:https://www.cs.princeton.edu/~arora/ 生日:1968年一月 祖籍:印度 本科:1990年麻省理工大学毕业 博士:1994年加州伯克 ...

  5. python新模块:secrets模块(为账户密码)

    默认我们会使用random模块, 而secrets模块用来产生强加密的随机数, 例如账号认证 import secrets import string characters = string.asci ...

  6. (笔记)Mysql命令create table:创建数据表

    create table命令用来创建数据表. create table命令格式:create table <表名> (<字段名1> <类型1> [,..<字段 ...

  7. "android.uid.systemandroid.view.InflateException: Binary XML file line #7: Error inflating class android.webkit.WebView

    在android源码中编译app通过,运行时出现错误: "android.uid.systemandroid.view.InflateException: Binary XML file l ...

  8. Yum 安装并设置 MySQL

    本质上都是设置一个yum源,然后yum安装即可.   不过添加yum源有两个方法,一种是自己新建一个 /etc/yum.repos.d/mysql-community.repo :另一种是使用MySQ ...

  9. javapms部署之后首页不能正常显示问题

    今天在ligerui的技术群里看见了javapms,于是就到官网逛了逛 首先要做的就是了解了javapms使用到的技术 然后下载了程序安装包javapms_v1.1_beta(官网下载失败了,就bai ...

  10. C# 窗口自适应窗口宽度和高度

    其实winform并不适合做自适应这玩意的,虽然,能做是能做, 就像菜刀一样能切水果,但是,不是那么合适,毕竟有水果刀 wpf做自适应拉伸窗体,会更好一些. 代码: #region 自适应 priva ...