日志

uni-app中使用scroll-view滚到底部时多次触发scrolltolower

 来源    2019-12-08    285  

一、前言、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 class="scroll-view-item uni-bg-red">A</view>
                    <view class="scroll-view-item uni-bg-green">B</view>
                    <view 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 class="scroll-view-item uni-bg-red">A</view>
                    <view class="scroll-view-item uni-bg-green">B</view>
                    <view 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;//回到最顶部
    },
   }
}
相关文章
react-native – 在本机中滚动到ScrollView组件底部时调用事件
问答我有个问题. 如何在ScrollView底部向下滚动反应原生时调用函数? 请帮我. 非常感谢!::有效! var windowHeight = Dimensions.get('window').hei ...
50
C#中要使ListBox使用AddRange()时,能够触发SelectedValueChanged事件
日志1. 要触发 SelectedValueChanged事件,必须要当ListBox所选中的值发生改变     基本思路是:          当AddRange()后,就马上指定ListBox的Sel ...
1
extjs – 在Sencha touch中创建Carousel View与apple app Store相同
问答我正在使用sencha Touch应用程序. 我已经将ext.carousel组件用于不同的视图. 实际上,我想在转盘中显示我上一张和下一张物品卡的一部分. 和下面的苹果应用商店一样, 任何人都可以建 ...
2
NGUI例子Scroll View场景中item添加点击后自动滑到终点
日志http://blog.csdn.net/luyuncsd123/article/details/22914497 最近在做一个项目的UI,需求是1.拖动items后当永远有一个item保存在中间位置 ...
4
关于Unity中stretch的分开使用、预制体、Scroll View的UI节点
日志一.上次讲的菊花的四个花瓣,只讲了四个花瓣和在一起的时候的作用,现在是分开的菊花的四个花瓣的作用 1.创建一个Canvas2.对Canvas进行初始化3.创建一个Image的UI节点作为Canvas的 ...
7
UGUI 用手柄或者键盘控制选择Scroll View中的游戏对象时,滚动条跟着移动
日志原预制体以及脚本的下载地址:https://download.csdn.net/download/qq_15017279/10404010 1.新建一个Scroll View,删掉横向的滚动条,并且把 ...
1
c# – 以编程方式更改Windows 10 UWP App中的主题
问答我能够使用this.RequestedTheme = ElementTheme.Dark更改主题; 但我需要的是整个应用程序级别,因为这只会将当前页面的主题更改为黑暗. 每当我尝试这个App.Curr ...
6
c# – 如何在Azure for Net Core 2 App中启用应用程序日志?
问答我正在尝试在azure中启用应用程序日志. 我在azure的appService中运行了一个虚拟Net Core 2应用程序. 基本上我的目标是在日志流和应用程序日志文件中查看跟踪消息,但我没有找到正 ...
3
npm – 使用Webpack的MapboxGL:“ReferenceError:e未定义”(在vue-cli app中)
问答我正在使用webpack模板开发一个vue-cli 2.9.3应用程序.我有一个使用MapboxGL的组件,使用'mapbox-gl;'中的import mapboxgl导入. 使用npm run d ...
42
需要帮助找出如何在spring boot java app中从yml加载嵌套列表
问答我有一个像这样的yaml文件设置: system: locators: - first.com - 103 - 105 - second.com - 105 我想将其加载为@autowired配置,看 ...
1
c# – LogicalCallContext在Console App中流过await但不在VS UnitTest中流动
问答我正在使用Logical CallContext在一系列等待中回传信息.有趣的是,在我的测试控制台应用程序中,一切正常.但是,当在VS UnitTest的上下文中运行我的单元测试时,调用上下文似乎没有 ...
2
在react-redux app中获取详细api数据的好习惯
问答当您处理多个主要详细信息视图时,最佳做法是在反应应用程序中获取详细信息数据? 举个例子,如果你有 – / rest / departments api返回部门列表 – / rest / departm ...
4
node.js – 在swagger nodejs restful app中集成护照中间件?
问答最近开始探索nodejs express app的swagger. 据我所知,swagger是一种框架,需要在nodejs express app中遵循约定. Swagger通过控制器自动映射路线. ...
14
ruby-on-rails – 单表继承在Rails 4 app中不起作用 – ActiveRecord :: SubclassNotFound:单表继承机制失败
问答我有一个新的Rails 4应用程序,我在STI配置中创建了一些模型. 主模型称为Order,它继承自ActiveRecord :: Base.这是它的样子: class Order < Acti ...
2
c# – 在WinForms App中编译ASPX
问答我正在编写一个发送电子邮件的WinForms应用程序(如邮件合并). 我想使用ASP.Net的渲染引擎来呈现消息的HTML主体. 在没有整个ASP.Net运行时的情况下,获取单个ASPX页面的渲染输出 ...
2
ruby-on-rails-3 – 在我们的Rails3 / Heroku App中设置Paperclip AWS S3进行图像存储时遇到麻烦
问答我们已经构建了一个rails应用程序,其中包含多个用户和每个用户的图像.在我们的本地主机上完成所有开发工作,我们为用户提供了工作种子.照片-但是现在我们正在尝试使用S3进行图像存储,我们在-期间遇到错 ...
1
ruby-on-rails-3 – 在heroku上使用rails 3 app中的mongrel 1.2.0.pre2时出错
问答我正在从谷歌进行身份验证并获得请求太长的错误所以在一些研究中我添加了mongrel gem.这修复了本地计算机上的请求太长的错误. 但是,现在当我推送到heroku时,我不断得到以下错误 You ha ...
1
python – 在Heroku上托管的Flask app中渲染Bokeh图
问答我有一个由Heroku在https://macabre-spirit-1593.herokuapp.com/1/提供的以下基本散景图.当我在本地运行此应用程序,或保存Heroku页面并在本地打开时,情 ...
3
python – 错误:gunicorn:无法在’app’中找到应用程序对象’app’
问答这是我的代码: app.py from flask_graphql import GraphQLView from app.infrastructure.graphql import schema f ...
2