在项目开发过程中,组件是微信小程序提供给我们的一个分页器,一般滑动到底部时会触发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. cc.Component 的使用

    1.组件入口函数,常有的:onLoad,start,update //组件在加载的时候运行,并且场景的初始化工作已经完成 onLoad() { }, //组件在第一次update调用之前调用 star ...

  2. jquery 第四章

    1.回顾 节点.append(内容) 节点.prepend(内容) 节点.remove() 节点.attr("属性","值") 节点.css("样式& ...

  3. vmware ubuntu硬盘空间不够用,空间扩展

    我从来没有想过我的虚拟机内存会不够用,毕竟已经20G了,可是最近学习python,装了些学习有关的软件, 期末做libvirt管理实验,存了两个镜像,就变成这样了,所以,我就像了要扩展硬盘空间,在网上 ...

  4. Angular组件——投影

    运行时动态改变组件模版的内容.没路由那么复杂,只是一段html,没有业务逻辑. ngContent指令将父组件模版上的任意片段投影到子组件上. 一.简单例子 1.子组件中使用<ng-conten ...

  5. 【Java】 剑指offer(11) 矩阵中的路径

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字 ...

  6. BZOJ.4942.[NOI2017]整数(分块)

    BZOJ 洛谷 UOJ 可能是退役之前最后一个BZOJ rank1了? 参考这里. 如果没有减法,对一个二进制数暴力进位,均摊复杂度是\(O(1)\)的(要进\(O(n)\)次位就至少需要\(O(n) ...

  7. 英语口语练习系列-C37-服饰-询问年龄-沁园春-长沙

    服饰 clothes or jewelry your favorite clothes or jewelry jewelry necklace bracelet earrings gold diamo ...

  8. ZooKeeper Getting Started Guide

    http://zookeeper.apache.org/doc/trunk/zookeeperStarted.html What is ZooKeeper? ZooKeeper is a centra ...

  9. JQuery 目录树jsTree插件用法

    PHP循环构造目录树结构 <ul> <php> function digui($fid,$level){ $class=M("wangpan_class") ...

  10. Java try-cath-finally异常

    Java 内置异常类 Java 语言定义了一些异常类在 java.lang 标准包中. 标准运行时异常类的子类是最常见的异常类.由于 java.lang 包是默认加载到所有的 Java 程序的,所以大 ...