最近使用微信小程序开发的时候,需要用scroll-view的bindscrolltolower事件,控制加载下一页的内容。但是发现在ios里,下拉滚动一次,事件触发两次,导致重复加载数据。

经过百度和亲身试验,可以采用用bool变量控制的方法解决这个问题:

1、在data中定义bool变量

//是否正在处理滚动事件,避免一次滚动多次触发
isScrolling:false

2、bindscrolltolower事件处理函数中,进入时判断是否正在处理,并设置isScrolling值为true;退出时设置isScrolling值为false

if(this.data.isScrolling===true)
return;
this.data.isScrolling=true;
//业务逻辑代码
..........
this.data.isScrolling=false;

微信小程序scroll-view滚动一次多次触发的问题解决方案的更多相关文章

  1. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  2. 解决微信小程序ios端滚动卡顿的问题

    方案1:直接使用微信小程序提供的 “scroll-view " 组件. <scroll-view scroll-y style="height: 100%;"> ...

  3. [微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式

    小程序 picker 多列选择器 数据动态获取 需求是将各校区对应各班级的数据 以两列选择器的方式展示出来,并且可以在选择完成之后记录选结果参数. 校区数据 和 班级数据 分别是两个接口,以 校区 t ...

  4. 微信小程序scroll-view横向滚动

    官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效 官方没有给出css代码,横向需要设置两个css属性才行: white-space: nowrap; ----规定段落中的文本 ...

  5. 关于微信小程序获取view的动态高度填坑

    wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...

  6. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  7. 微信小程序 左右分类滚动列表

    今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. <view class="page"> <view class ...

  8. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  9. 微信小程序将view动态填满全屏

    一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ ...

  10. 微信小程序-通知公告滚动提示

    wxml如下: <view class='scroll_view_border'> <view class="srcoll_view" bindtap=" ...

随机推荐

  1. [数据结构] 2.7 Heap 堆

    * 注: 本文/本系列谢绝转载,如有转载,本人有权利追究相应责任. 1.堆是什么? (如图所示是一个小堆) 1)堆是一颗完全二叉树,它的最后一层不是满的,其他每一层都是满的,最后一层从左到右也没有空隙 ...

  2. 移动端跨平台方案对比:React Native、weex、Flutter

    跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需 ...

  3. angular 引入ocLazyLoad实现js、controller懒加载

    项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller.现引入ocLazyLoad实现按需加载,到指定页面再加载指定js.controller 1 ...

  4. nvm 设置 nodejs 默认版本

    nvm 设置 nodejs 默认版本 windows 系统的版本管理软件是nodist mac系统的node版本管理根据是nvm 每次重启vscode软件后,nvm ls 看到的默认版本都会恢复到v5 ...

  5. SQL server 2012安装中出现的INSTALLSHAREDDIR 和 INSTALLSHAREDWOWDIR 参数具有相同的值问题

    出现的问题如下: INSTALLSHAREDDIR 和 INSTALLSHAREDWOWDIR 参数具有相同的值“D:\soft\sql”.但是,这些参数必须具有不同的值.请为其中一个参数指定不同的值 ...

  6. CentOS7系统上的GPSTK源码安装

    网址:http://www.gpstk.org/bin/view/Documentation/BuildingGPSTkUnderUnix 这里使用Cmake来安装源码,网站上的原文摘抄如下,有少部分 ...

  7. 菜鸟使用MySQL存储过程and临时表,供新手参考,请高手斧正

    因为公司最近的一个项目,第一次用到了MySQL(5.10版本),之前听传说MySQL很厉害的样子,因为开源而神奇,但是现在用起来, 感觉并不好啊!我知道是我水平太down,呜呜呜,请各路神仙略施小技, ...

  8. python day18 作业 Django 开发主机管理系统

    http://www.cnblogs.com/liang2580/p/9248803.html

  9. yuv2mp4

    >您使用什么类型的YUV像素格式?最常见的格式是YUV4:2:0平面8位(YUV420p).您可以键入ffmpeg -pix_fmts以获取所有可用格式的列表.>什么是帧率?在我的例子中, ...

  10. MarkdownPan2 简单使用指南

    markdown 简单使用指南 一级标题 二级标题 三级标题加代码 四级标题 这里是加粗 这里是正文and English 888 这里有正文嵌入代码这种样式 这里是代码块 这种使用的代码块 还有引用 ...