一、前言、scroll-view基本属性:

前言:

  前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示(在我这个页面中同时使用了三个scroll-view做数据展示),因为这几个展示的内容的数据都比较的多,因此为了页面的数据加载顺畅决定使用上拉加载(简单的说就是数据分页显示)。

页面组成如下图所示:

scroll-view属性说明:

属性名 类型 默认值 说明 平台差异说明
scroll-x Boolean false 允许横向滚动  
scroll-y Boolean false 允许纵向滚动  
upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件  
lower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件  
scroll-top Number   设置竖向滚动条位置  
scroll-left Number   设置横向滚动条位置  
scroll-into-view String   值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素  
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡  
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 微信小程序
show-scrollbar Boolean false 控制是否出现滚动条 App-nvue 2.1.5+
@scrolltoupper EventHandle   滚动到顶部/左边,会触发 scrolltoupper 事件  
@scrolltolower EventHandle   滚动到底部/右边,会触发 scrolltolower 事件  
@scroll EventHandle   滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}  

二、问题:

第一个考虑的上拉加载事件:onReachBottom页面滚动到底部的事件,常用于上拉加载下一页数据。但是如使用scroll-view导致页面级没有滚动,则触底事件不会被触发,所以这里存在的问题是有时候无法触发onReachBottom。

  最终选择了适用scroll-view自带的滚到底部触发事件scrolltolower事件,虽然这个事件确实能够实现上拉加载数据分页的功能,但是这个是事件存在两个问题。第一个问题就是当滚动条滚动到底部时会多次触发scrolltolower事件,第二个问题是当页面由第一个scroll-view(该页面已经到了的最底部了)切换到第二个scroll-view时会自动滚动到页面的最底部(即第二个页面默认已经到了最底部)。

数据加载多次如下图所示:

三、解决方案:

关于页面到最底部多次触发scrolltolower事件解决:

在scrolltolower触发事件中设定一个定时器setTimeout(callback, delay, rest),在指定的时间后执行注册的回调函数(简称防抖)。
代码如下所示(简单示例):

 <view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
@scroll="scroll">
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
</scroll-view>
</view>
//滚动到最底部触发事件
lower() {
//在1s后执行一次该函数
setTimeout(() => { //TODO这里填写你加载数据的方法
this.getData(); }, 1000);
},

关于页面由第一个scroll-view切换到第二个scroll-view时会自动滚动到页面的最底部:

  设置一个scrollTop设置竖向滚动条的位置,首先默认为0,当页面向下滚动会触发scroll-top事件从而改变scrollTop的值,当切换到第二个scroll-view时在默认设置scrollTop为0,那么在切换到第二个页面的同时页面的竖向滚动条的位置会默认滚动到最顶部,从而解决了默认滚动到最底部加载多次数据的问题。

代码如下所示(简单示例):

 <view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
@scroll="scroll" @click="changeScrollView">
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
</scroll-view>
</view>
export default {
data() {
return {
scrollTop: 0
}
},
methods: {
//滚动时触发事件
scroll: function(e) {
// console.log(e.detail.scrollTop);
this.scrollTop = e.detail.scrollTop;
},
//切换scroll-view事件
changeScrollView(){
this.scrollTop=0;//回到最顶部
},
}
}

uni-app中使用scroll-view滚到底部时多次触发scrolltolower事件的更多相关文章

  1. C#中要使ListBox使用AddRange()时,能够触发SelectedValueChanged事件

    1. 要触发 SelectedValueChanged事件,必须要当ListBox所选中的值发生改变 基本思路是: 当AddRange()后,就马上指定ListBox的SelectedIndex,这样 ...

  2. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  3. 全面理解iOS开发中的Scroll View[转]

    from:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方 ...

  4. 在iOS APP中使用H5显示百度地图时如何支持HTTPS?

    现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...

  5. uni app中关于图片的分包加载

    因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...

  6. NGUI系列教程十(Scroll View实现触摸滚动相册效果)

    NGUI中提供了两种Scroll View 一种是通过手指或鼠标滑动视图时移动平面物体,另一种则是直接移动摄像机,他们各有各的好处.但是NGUI提供的Scroll View很难实现类似Android ...

  7. NGUI例子Scroll View场景中item添加点击后自动滑到终点

    http://blog.csdn.net/luyuncsd123/article/details/22914497 最近在做一个项目的UI,需求是1.拖动items后当永远有一个item保存在中间位置 ...

  8. 关于Unity中stretch的分开使用、预制体、Scroll View的UI节点

    一.上次讲的菊花的四个花瓣,只讲了四个花瓣和在一起的时候的作用,现在是分开的菊花的四个花瓣的作用 1.创建一个Canvas2.对Canvas进行初始化3.创建一个Image的UI节点作为Canvas的 ...

  9. UGUI 用手柄或者键盘控制选择Scroll View中的游戏对象时,滚动条跟着移动

    原预制体以及脚本的下载地址:https://download.csdn.net/download/qq_15017279/10404010 1.新建一个Scroll View,删掉横向的滚动条,并且把 ...

随机推荐

  1. 学习笔记65_K均值_聚类算法

  2. SROP的一个实例

    以前一直只是大概看过这种技术,没实践过,今天刚好遇到一道题,实践了一波,确实很方便 unmoxiao@cat ~/s/pd_ubuntu> r2 -A smallest 00:54:15 War ...

  3. NOIP模拟 39

    考的嘛也不是. 伤心(怎么可能) T1稍想想组合数,然后牢记: 取模题随时取模,包括刚刚读入的数据  T2想到了基环树,然而不会打QAQ.. 非常简洁但非常大神的做法:随便断掉环上的一条边 利用“这条 ...

  4. 【Spdy协议简介】

    一.SPDY协议诞生记 SPDY (SPDY 是 Speedy 的昵音,意思是更快)是 Google 开发的基于传输控制协议 (TCP) 的应用层协议 ,那么为什么要搞一个SPDY出来呢?距离万维网之 ...

  5. Python openpyxl Excel绘制柱形图

    这是一份openpyxl的使用指南. 大体内容翻译自官网 https://openpyxl.readthedocs.io/en/stable/charts/bar.html#vertical-hori ...

  6. Windows系统下搭建WAMP环境

    Wamp就是Windos Apache Mysql PHP集成安装环境,即在window下的apache.php和mysql的服务器软件.其中php环境配置是至关重要的一部分,本文就针对php在本地的 ...

  7. C# 获取系统当前登录用户(管理员身份运行同样有效)

    今天学习下怎么用.Net获取系统当前登陆用户名,因为目前网上基本只有最简单的方式,但以管理员身份运行的话就会获取不到,所以特整理一下作为分享,最后附带参考文档,方便深究的童鞋继续学习. ======= ...

  8. 【笔记】nginx部署静态网站

    安装nginx 本地到官网下载,然后把压缩包传到服务器上 安装三个依赖 apt-get install libpcre3 libpcre3-dev apt-get install zlib1g-dev ...

  9. kafka线上滚动升级方案记录

    kafka升级方案 为什么进行kafka升级 一.修改unclean.leader.election.enabled默认值Kafka社区终于下定决心要把这个参数的默认值改成false,即不再允许出现u ...

  10. mysql中 drop、truncate和delete的区别

    mysql中drop.truncate和delete的区别 (1)DELETE语句执行删除的过程是每次从表中删除一行,并且同时将该行的删除操作作为事务记录在日志中保存以便进行进行回滚操作. TRUNC ...