在项目开发过程中,组件是微信小程序提供给我们的一个分页器,一般滑动到底部时会触发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解决的更多相关文章

  1. 微信小程序 textarea的placeholder层级过高 在弹层之上 bug解决方法

    微信小程序textarea的placeholder的层级一直都是一个神坑, 我们是没有办法将我们的弹层加大层级去盖过placeholder的, 所以要解决这个问题只能从另外的角度找思路 我的思路是 : ...

  2. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  3. 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放

    小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...

  4. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  5. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  6. 小程序解决方案 Westore - 组件、纯组件、插件开发

    数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...

  7. 微信小程序之自定义组件的应用

    小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...

  8. 「小程序JAVA实战」小程序的基础组件(24)

    转自:https://idig8.com/2018/08/12/xiaochengxu-chuji-24/ 来说下 ,小程序的基础组件.源码:https://github.com/limingios/ ...

  9. 微信小程序 | 51,live新课“小程序UI容器组件”的课堂计划

    零基础前端自学入门:小程序UI容器组件 这是一节以UI布局.容器组件的使用为主题的live,专注于布局与容器这一个点,努力把这一点讲透.这是继4月22日整体入门live“零基础周末学习小程序开发”之后 ...

随机推荐

  1. All about Using Burp Suite

    1.how  to use burpsuite I can't thank them enough for allowing us to test web application ,making su ...

  2. 利用jQuery如何获取当前被点击的按钮

    如下代码 <tr> <td><a href="javascript:void(0)">点我1</a></td> < ...

  3. python中的while循环和for循环

    1.while循环 Gif 演示 Python while 语句执行过程 while 语句时还有另外两个重要的命令 continue,break 来跳过循环,continue 用于跳过该次循环,bre ...

  4. 微信小程序--家庭记账本开发--02

    代码文件的了解 对于一个程序的开发,代码的了解的必须的,不同的后缀名文件有着不同的作用,通过学习,对于微信小程序开发中的文件有了自己的理解. 文件概述 一个微信小程序一般有有pages文件夹,util ...

  5. 2017-10-22—发光二极管

    LED与 LD的差别在工作原理上的差别:LED是利用注入有源区的载流子自发辐射复合发光,而LD是受激辐射复合发光.在结构上的差别:LD有光学谐振腔,使产生的光子在腔内振荡放大,LED没有谐振腔.性能上 ...

  6. Object 中 equals()使用

    详细看: https://www.cnblogs.com/naihuangbao/p/9445027.html 1. ==是判断两个变量或实例是不是指向同一个内存空间equals是判断两个变量或实例所 ...

  7. Navicat Premium 最新版本12.1.16-64bit 完美破解,亲测可用!

    声明:本文只是提供一个网络上找到的针对12.1.16版本的破解注册机使用方式做一个说明,不建议企业用户破解,毕竟码农不容易,有条件的还是希望大家购买原版.当然个人学习用的但又不想购买原版的,这里只是提 ...

  8. 廖雪峰Python3笔记

    主要复习过一遍 简介 略 安装 略 *** 第一个Python程序 第一行的注释: # _*_ coding: utf-8 _*_ #!/usr/bin/env python3 print() 可以接 ...

  9. python 读取文本文档中的数据

    import os dir = input('Please input the file dir:')#提示输入文件路径 while not os.path.exists(dir):#判断文件是否存在 ...

  10. flex 左边固定宽度,右边自适应

    <div id="flex"> <div id="left">我在边,定宽</div> <div id="r ...