关于vux-ui框架的scroller组件所踩的坑
这是我在做一个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组件所踩的坑的更多相关文章
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- Primeng UI框架中 分页组件用法
1.在当前模块或当前页面的对应的module.ts文件中引入相应组件模块,如:core.module.ts模块. import { PaginatorModule } from 'primeng/pr ...
- 很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
- 2018年九个很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
- 5款vue前端UI框架
Vue.js是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 实用的 Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- vue统计组件库和ui框架
UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...
- HTML5 UI框架Kendo UI Web教程:创建自定义组件(三)
Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...
- HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)
在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...
随机推荐
- Easy-Classification-验证码识别
1.背景 Easy-Classification是一个应用于分类任务的深度学习框架,它集成了众多成熟的分类神经网络模型,可帮助使用者简单快速的构建分类训练任务. 案例源代码 Easy-Classi ...
- servlet包找不到,webservlet注解无效
把tomcat/lib/ 中的annotations-api.jar和servlet-api.jar复制到jdk/jre/lib/ext/目录中就行了 mine:C:\environment\apa ...
- 【第7篇】AI语音交互原理介绍
本章主要介绍AI语音交互的原理,包括语音交互的流程以及各流程节点所涉及的相关知识,如语音采集.语音识别.自然语言处理.语音合成等. 2.1 AI语音交互 AI语音交互通俗点说就是人与机器间进行语音理解 ...
- day26-过滤器Filter
Filter过滤器 1.Filter过滤器说明 为什么需要过滤器? 先来看一个例子: 我们在登录网站页面时,需要先进行登录验证. 用户访问的正常的流程应该是: 用户先通过登录页面进行验证,然后才可以访 ...
- ArcGIS 添加Excel数据 报错 ArcGIS Failed to connect to database 外部数据库驱动程序(1)中的意外错误
原因是因为 操作系统安装了一些补丁,卸载即可. 把以下补丁卸载掉即可. win7 <-- KB4041678 , KB4041681 --> SERVER 2008 R2 <-- ...
- JavaScript笔记之面向对象
面向对象 了解构造函数原型对象的语法特征,掌握 JavaScript 中面向对象编程的实现方式,基于面向对象编程思想实现 DOM 操作的封装. 了解面向对象编程的一般特征 掌握基于构造函数原型对象的逻 ...
- Type Script 在流程设计器的落地实践
流程设计器项目介绍 从事过BPM行业的大佬必然对流程建模工具非常熟悉,做为WFMC三大体系结构模型中的核心模块,它是工作流的能力模型,其他模块都围绕工作流定义来构建. 成熟的建模工具通过可视化的操作界 ...
- Java语言进阶 day02【Collection、泛型】
主要内容 Collection集合 迭代器 增强for 泛型 教学目标
- 【每日一题】【DFS】2022年1月5日-543. 二叉树的直径
给定一棵二叉树,你需要计算它的直径长度.一棵二叉树的直径长度是任意两个结点路径长度中的最大值.这条路径可能穿过也可能不穿过根结点. 答案: /** * Definition for a binary ...
- ARC145~152 题解
比赛标号从大到小排列 . 因为博主比较菜所以没有题解的题都是博主不会做的 /youl ARC144 以前的比赛懒得写了 . 目录 AtCoder Regular Contest 152 B. Pass ...