小程序:scroll-view组件滑动多次触发scroll事件的bug解决
在项目开发过程中,组件是微信小程序提供给我们的一个分页器,一般滑动到底部时会触发scroll事件,scroll事件中往往包含对后端数据的请求;若是还未滑动到底部时频繁触发事件,则会频繁发请求,达不到想到的分页效果。
先来说说的用法:
<scroll-view scroll-y="true" style="height:{containerHeight}px" lower-threshold="300" on-scrolltolower={this.getList()}>
</scroll-view>
在data中设置两个变量:
data: {
containerHeight: 0,
doneLoading: false
}
在页面加载时调用两个函数:
onLoad: function(option) {
this.setContainerHeight();
this.getList();
}
函数的具体实现:
setContainerHeight(){
const systemInfo = wx.getSystemInfoSync();
this.data.containerHeight = systemInfo.windowHeight - 50;
},
getList() {
/*这里是data中的原始分页信息数据*/
const data = this.data;
const that = this;
const pageInfo = data.pageInfo;
/*下面是对设置的开关的处理*/
if (data.doneLoading) {
return;
}
data.doneLoading = true;
/*发异步请求(根据具体项目中对http请求的封装)*/
if(data.pageInfo.totalCount>data.cancelList.length){
CancelInfo.getCanceltList({
currentPage: data.pageInfo.currentPage
}).then(res => {
if (res.retCode === 200) {
data.pageInfo.currentPage = res.data.paginationInfo.currentPage + 1;
data.pageInfo.totalCount = res.data.paginationInfo.totalRecord;
data.cancelList = data.cancelList.concat(res.data.dataInfo);
}
/*请求成功重设开关*/
data.doneLoading = false;
}).catch(err => {
console.log(err);
})
}
}
解决办法:
设置一个开关变量,也就是这里的doneLoading
当开关为true时,getList整个函数从头执行到尾,包括发请求;当开关为false时,会执行判断语句中的”return;”这样处理可以将控制权返回给页面,后面的异步发请求以及处理请求数据的过程会留到下次scroll事件符合触发条件时再触发;这样可以有效的减少请求频繁触发。
使用还必须注意设置滚动的方向、滚动器的高度;一般来说可以通过调用微信小程序的wx.getSystemInfoSync()接口,获取系统信息中的可使用的窗口高度,根据页面的展示情况,得到的可使用高度;当然,也可以直接给固定值,具体看开发需求。
小程序:scroll-view组件滑动多次触发scroll事件的bug解决的更多相关文章
- 微信小程序 textarea的placeholder层级过高 在弹层之上 bug解决方法
微信小程序textarea的placeholder的层级一直都是一个神坑, 我们是没有办法将我们的弹层加大层级去盖过placeholder的, 所以要解决这个问题只能从另外的角度找思路 我的思路是 : ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放
小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 小程序解决方案 Westore - 组件、纯组件、插件开发
数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...
- 微信小程序之自定义组件的应用
小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...
- 「小程序JAVA实战」小程序的基础组件(24)
转自:https://idig8.com/2018/08/12/xiaochengxu-chuji-24/ 来说下 ,小程序的基础组件.源码:https://github.com/limingios/ ...
- 微信小程序 | 51,live新课“小程序UI容器组件”的课堂计划
零基础前端自学入门:小程序UI容器组件 这是一节以UI布局.容器组件的使用为主题的live,专注于布局与容器这一个点,努力把这一点讲透.这是继4月22日整体入门live“零基础周末学习小程序开发”之后 ...
随机推荐
- mac os安装shell man中文帮助工具(manpages-zh),即man命令显示中文帮助文档
一.从官网(http://pkgs.fedoraproject.org/repo/pkgs/man-pages-zh-CN)下载安装包:或者从开源代码(https://github.com/man-p ...
- word 内容控件属性编辑
场景: 别人发给自己一份word模板,基于统一性,里面包含了很多“内容控件”,一般情况下,只需要根据内容控件进行编辑即可,但如果想对内容控件本身做编辑操作,例如删除等. 操作: 单击 文件>选项 ...
- jetbrains的JetBrains PyCharm 2018.3.1破解激活到2100年(最新亲测可用)
破解补丁激活 之前看了好多的其它的方法感觉都不是很靠谱还是这个本人亲试可以长期有效不仅能激活pycharm.jetbrains的JetBrains PyCharm 2018.3.1破解激活到2100年 ...
- 如何导出chrome已安装的拓展程序
如何导出chrome已安装的拓展程序 已安装的chrome插件可以在浏览区中输入*chrome://extensions*便可以查看插件列表. 对于windows系统来说,这些插件对应的目录为: C: ...
- Android 控件
1. WebView <uses-permission android:name="android.permission.INTERNET" /> WebView wv ...
- CentOS下安装yum源的流程和操作
一般公司都用Linux来搭建服务器,Linux安装软件时能够用yum安装依赖包是一件非常简单而幸福的事情,因为你只需一个简单的安装命令yum install []即可安装相应的软件,yum工具会自动的 ...
- UWB DWM1000 智能跟踪小车 --[蓝点无限]
蓝点DWM1000 模块已经打样测试完毕,有兴趣的可以申请购买了,更多信息参见 蓝点论坛 UWB 智能跟踪小车:一共三个UWB模块,手持一个,小车上两个. 通过测量小车上两个模块与手持模块之间的距离, ...
- 转 InnoDB索引
原文: http://blog.codinglabs.org/articles/theory-of-mysql-index.html InnoDB索引实现 虽然InnoDB也使用B+Tree作为索引结 ...
- (80)Wangdao.com第十六天_JavaScript Object 对象的相关方法
Object 对象的相关方法 Object.getPrototypeOf() 返回参数对象的原型. 这是获取某对象的原型对象的标准方法. var F = function () {}; var f = ...
- Go九九乘法表
package main import "fmt" func main(){ ; i < ; i ++ { k ++ ; j ++ { { fmt.Printf(" ...