小程序: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“零基础周末学习小程序开发”之后 ...
随机推荐
- beta冲刺6/7
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(6/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 ppt制作 视频拍摄 接下来的计划 准备答辩 ...
- python模拟鼠标键盘操作 GhostMouse tinytask 调用外部脚本或程序 autopy右键另存为
0.关键实现:程序窗口前置 python 通过js控制滚动条拉取全文 通过psutil获取pid窗口句柄,通过win32gui使程序窗口前置 通过pyauto实现右键菜单和另存为操作 1.参考 aut ...
- easyui提交form表单接受数据处理、
$('#Form').form('submit', { url:"withdrawal/bankAuthenticate4List.do", onSubmit: function( ...
- SQL Server Report Server 报表用户权限T-SQL查询
/************************************************************************** 查询用户在报表上的权限 ************ ...
- 面试题:常用的http状态码
3XX 重定向 301 Moved Permanently 永久重定向,表示请求的资源已经永久的搬到了其他位置 302 Found 临时重定向,表示请求的资源临时搬到了其他位置 303 See ...
- Python金融大数据分析PDF
Python金融大数据分析(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1CF2NhbgpMroLhW2sTm7IJQ 提取码:clmt 复制这段内容后打开百度网盘 ...
- XVIII Open Cup named after E.V. Pankratiev. GP of Urals
A. Nutella’s Life 斜率优化DP显然,CDQ分治后按$a$排序建线段树,每层维护凸包,查询时不断将队首弹出即可. 时间复杂度$O(n\log^2n)$. #include<cst ...
- # Do—Now——团队冲刺博客_总结篇
Do-Now--团队冲刺博客_总结篇 目录 博客链接 作者 1. 第一篇(领航篇) @仇夏 2. 第二篇 @侯泽洋 3. 第三篇 @仇夏 4. 第四篇 @周亚杰 5. 第五篇 @唐才铭 6. 第六篇 ...
- 08-Xml & Tomcat
Xml & Tomcat Xml >eXtendsible markup language 可扩展的标记语言 XML 有什么用? 1. 可以用来保存数据 2. 可以用来做 ...
- css加载动画...
加载动画... <p>加载动画...</p> <p> </p> <p> </p> <style><!-- .c ...