这是我在做一个demo的一个上垃加载下拉刷新功能时所遇到的问题,由于伤了好一会脑筋,所以留下这篇笔记以供后续查询;

在上代码前建议在开发项目时不要优先选择vux这个框架,因为有一些常用的功能组件官方已不再更新,当然如果你的项目中没有那些功能的话,这个框架的确是一个不错的选择,或者说用别的框架代替vux官方放弃的功能,也是可以的,具体看个人吧!

先说说我遇到的问题吧:其实问题就一个,就是上拉加载的问题。

1、一开始我是用该组件的@on-scroll-bottom触发方法实现数据加载,此方法由该组件的scroll-bottom-offset属性触发,官方文档上说明这个方法会触发多次,我想着用一个状态去禁止多吃触发,结果失败了,果断换了另一个方法,即@on-pullup-loading。

2、@on-pullup-loading这个方法是可以实现的,不过有几个注意点需要格外注意,因为这个方法只触发一次,那么怎么让它可以多次执行呢。。。。  嘿嘿!!  上代码先

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

  好吧!大致就记得这么多了,希望能帮主到人,如果有问题可以留言,但是不对的话请勿喷!!!

关于vux-ui框架的scroller组件所踩的坑的更多相关文章

  1. 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  2. 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  3. Primeng UI框架中 分页组件用法

    1.在当前模块或当前页面的对应的module.ts文件中引入相应组件模块,如:core.module.ts模块. import { PaginatorModule } from 'primeng/pr ...

  4. 很受欢迎的vue前端UI框架

    最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...

  5. 2018年九个很受欢迎的vue前端UI框架

    最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...

  6. 5款vue前端UI框架

    Vue.js是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 实用的 Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue ...

  7. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  8. vue统计组件库和ui框架

    UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...

  9. HTML5 UI框架Kendo UI Web教程:创建自定义组件(三)

    Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...

  10. HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

随机推荐

  1. 关于小米mini路由器开启ssh红灯解决

    前言 小米 后续版本 对 ssh固件校验失败导致的,下载路由器旧版开发版固件,然后用后台web升级成老版本后,再采用官方方法刷入即可. 旧版路由器固件下载 地址 其他 后续的刷机可以参考我的文章

  2. 记录一次从linux移动一个项目到windows遇到的问题

    前言 这几天在linux平台写了一个垃圾软件,浪费了我10多天的时间,感觉很垃圾,然后我想在windows平台打包这个软件,然后出现了一个项目中有相同文件名的问题,导致一些文件相互覆盖 问题描述 我把 ...

  3. python仿写js算法二

    前言 之前写过一篇用python 仿写 js 算法,当时以为大部分语法都已经能很好的在python找到对应的语法结构,直到前几天我用 python 仿写了 慕课网解析视频加密的算法,我发现很多之前没遇 ...

  4. 07#Web 实战:实现 GitHub 个人主页项目拖拽排序

    实现效果图 GitHub 和 Gitee 个人主页中可以对自己的项目进行拖拽排序,于是我就想自己实现一个.本随笔只是记录一下大概的实现思路,如果感兴趣的小伙伴可以通过代码和本随笔的说明去理解实现过程. ...

  5. Django框架:8、聚合查询、分组查询、F与Q查询、ORM查询优化、ORM事务操作、ORM常用字段类型、ORM常用字段参数

    Django 数据库 目录 Django 数据库 一.聚合查询 二.分组查询 三.F查询与Q查询 1.F查询 2.Q查询 3.Q查询进阶操作 四.ORM查询优化 1.only与defer 五.ORM事 ...

  6. Jmeter 跨线程组传参

    某种情况下需要获取到上个线程组的返回值进行测试,但线程组与线程组之间是相互独立,互不影响.若要得到上个线程组的返回值,则可通过__setProperty()函数将所提取的值设置为jmeter 内置属性 ...

  7. windows7系统中安装deepin系统虚拟机

    在windows系统中安装虚拟机首先需要在widows上下载并安装虚拟机创建工具VMware.这里用的工具版本是 VMware-workstation-full-9.0.2-1031769_www.s ...

  8. 【转载】EXCEL VBA 同时选择多个工作表的方法

    如果要用VBA同时选择多个工作表,可以利用数组或设置"Select"方法的参数为"False"来扩展所选择的内容,如下面的一些代码:   1.用工作表名称:   ...

  9. WCH沁恒 CH37系列芯片选型以及常见问题的处理(CH376/CH378)

    选型 型号 接口 功能 备注 电源 CH372 并口 USB_Device 全速 USB 设备接口,兼容 USB V2.0 3.1-3.6 4.2-5.4 CH374 SPI/并口 Host/Devi ...

  10. 第七节 VOR/DME进近程序保护区的绘制

    飞行程序设计软件实践 通过前面六节的练习,2023社区版插件的主要功能都已经使用到了.今天通过VOR/DME非精密进近程序,再将这些功能串起来使用一下.今天的软件,我们使用浩辰CAD2023版(过期后 ...