uniapp底部弹窗内滚动到底部触发事件

最新推荐文章于 2024-10-29 11:19:00 发布

原创最新推荐文章于 2024-10-29 11:19:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uni-app 专栏收录该内容

20 篇文章

订阅专栏

博客介绍了uni-app中小模块内部内容小区域滑动触底事件的实现方法，通过scroll-view包裹并使用@scrolltolower事件来处理，还展示了相关代码。

小模块内部内容小区域滑动触底事件；
scroll-view包裹，@scrolltolower事件；

代码展示：

<scroll-view :scroll-top="0" scroll-y="true" @scrolltolower="scrolltolower">
	<XXX/>			 
</scroll-view>

scrolltolower(){//do sth
	console.log('触底了哦')
	// this.$emit('nextPage',this.selectPage )
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

addU

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Uniapp系列教程】uni-app弹窗列表滚动，蒙层下面也跟随滚动解决方案

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

09-06

342

在使用uni-app开发时，遇到过弹窗（弹出层）中有长列表需要滚动的情况，同时蒙层（遮罩层）下面的页面也会发生滚动。默认情况下，当弹窗出现时，如果页面内容可以滚动，往往会导致蒙层下的内容跟着滚动，影响用户体验。或者弹窗内部列表滚动不流畅，甚至出现穿透现象。本文分享一个简单且实用的解决方案，保证弹窗内的列表可以正常滚动，且蒙层下面的页面不会被滚动影响，同时也能让蒙层下面的内容跟随滚动。

uniapp小程序禁止遮罩弹窗下的页面滚动的办法

热门推荐

sayyy的专栏

08-10

2万+

前言 Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）对于下拉还是上拉我是分不清的（因为不管说下拉还是上拉，都没说参照物，也就是，说上拉也行，说下拉也行。按照uniapp的说法叫下拉下一页数据，这里为了根官方一致，也叫下拉加载更多）。如何实现 uniapp 内置提供了名为 onReachBottom 的页面生命周期函数。该函数可以实现上拉加载更多的功能。页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事

uniapp中使用scroll-view实现后台数据的触底加载

GlowwormComrade的博客

05-31

1090

scroll-view触底加载。

uniapp 实现切屏与触底刷新

wuxian_wj的博客

03-21

1571

uniapp

uni.app滚动触底触发事件

A43216的博客

10-31

1633

uni.app滚动触底触发事件

uni-app：触底事件使用

我是小鹏呀的博客

03-04

5017

1.在项目的pages.json文件找到需要添加触底事件的页面，添加onReachBottomDistance（页面底部的触发距离）需求：需要滑到底部，加载更多数据，不想使用分页组件，实现触底加载。解决方法：使用页面滚动到底部的事件onReachBottom()2.在页面调用onReachBottom()

uniapp 底部弹窗选择器

02-08

### 如何在 UniApp 实现底部弹窗选择器 #### 底部弹窗选择器概述 UniApp 提供了多种方式来创建交互性强的用户界面组件，其中包括底部弹窗选择器。通过使用官方提供的 `PickerView` 和扩展组件 `Popup` 可以轻松构建...

uniapp聊天弹窗自动滚动

01-17

为了实现在 UniApp 中聊天窗口的消息能够随着新消息的到来而自动滚动到最新位置，可以利用 `scroll-view` 组件及其属性来完成这一需求。每当有新的消息被添加至会话列表时，通过设置 `scrollTop` 属性使视图滚向底部...

uniapp打开弹窗禁止底部页面滚动

04-02

这样，当弹窗内部的scroll-view滚动到底部时，不会触发外层页面的滚动。同时，需要确保弹窗外的页面内容在弹窗显示时无法滚动，可能需要结合CSS方法，或者在弹窗出现时动态设置页面的overflow。另外，引用[4]中的...

uniapp滚动到底部事件

杨葱儿

01-17

848

【代码】uniapp滚动到底部事件。

uniapp onReachBottom 触底事件

xiaosi1413的博客

09-29

1万+

onReachBottom 属于uniapp 钩子函数可以直接使用 onReachBottom 是触底函数是相对于整个页面，局部页面滚动不支持，请不要使用。如果 onReachBottom 函数不生效说明没有触底。触底了就一定执行。为了我实现效果onReachBottomDistance 配置的大一点执行了 ...

uni-app在组件中的触底事件

weixin_45901261的博客

09-26

4086

uni.emit、uni.on和uni.$off使用

uniapp项目中的上拉触底事件

weixin_72503508的博客

03-21

3202

1.1 在项目中的 pages.json 文件找到自己要做上拉触底事件的页面配置 onReachBottomDistance。1.3 在获取数据的函数中获取到数据之后不要立即赋值，要将之前的数据与下拉触底获取到的数据合并。通过公式：（页码数 * 每一页获取数据的条数 >= 总条数）如果符合则说明已经没有数据了。注意：不适合粘贴复制，只是怕大家看前面的关键代码段看的云里雾里，所以贴出完整代码以作对比。三、判断数据是否请求完成，如果请求完成就不应该继续发起请求了。3.1 在上拉触底事件中做判断。

uniapp scroll-view scrolltolower触底事件有时候不触发的问题

ZGG的博客

02-24

3186

出现触底不触发加载需要上拉在下拉才触发的问题

#Uniapp: onReachBottom页面触底的事件回调

...

01-22

2233

页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期可在pages.json里定义具体页面底部的触发距离"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages"style": {"navigationBarTitleText": "信息","onReachBottomDistance": 200, // 页面触底的距离"h5": { // h5页面特定样式}]

uni-app子组件如何触发触底事件

m0_64430502的博客

05-16

1514

触发触底事件父组件必须满足有滚动条在父组件里面定义触底事件 onReachBottom(){ uni.$emit('自定义名字') }, 子组件接受 mounted() { uni.$on('自定义名字',()=>{ //写代码例如写打印一串数字 console.log(123123); }) }, ...

Web前端之UniApp移动端实现触底和触顶功能、微信小程序、置顶、置底、触发、onReachBottom、onPageScroll

优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/

07-04

2733

Web前端之UniApp移动端实现触底和触顶功能、微信小程序、置顶、置底、触发、onReachBottom、onPageScroll

uniapp ，微信小程序，滚动（下滑，上拉）到底部加载下一页内容

qq_43557848的博客

10-29

1979

先定义总页码和当前页码,data(){return{data:[],currentPage:1,//页码totle_page:0,//总页码},reload(){//重置页码//清空数据//加载数据},