uniapp中，overflow-y: scroll与onReachBottom()冲突

已于 2023-06-28 14:25:15 修改
阅读量366 收藏 1
点赞数 1
文章标签： uni-app 前端 javascript
于 2023-06-28 14:21:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44108542/article/details/131435916
版权

改为

<scroll-view :scroll-top="scrollTop" scroll-y="true" class="stall-box" @scrolltolower="lower">

使用 @scrolltolower监听自定义方法 lower

lower: function(e) {
				console.log('到底底部')
				this.page++;
				this.init()
			},

Joker3269
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决ScrollView,ListView滚动条冲突
07-12
解决ScrollView ListView 滚动条冲突 ，其它带滚动条的控件一样适用 ，主要是固定内层控件的高度 达到可滑动的效果
详解overflow-scrolling解决滚动卡顿问题
01-18
如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。 解决方法 以下代码可解决这种卡顿的问题：-webkit-overflow-...
uniapp的onReachBottom与scroll-view标签冲突
wangtl0的博客
08-25 1739
uniapp的onReachBottom（触底加载数据）与scroll-view标签存在冲突，把scroll-view注释之后问题解决。 （1）page.json在指定页面位置配置 { “path”: “pages/flow/XXXXist”, “style”: { “enablePullDownRefresh”: true, “navigationBarTitleText”: “uni-app”, “onReachBottomDistance”:200}/触发刷新启动/ }, （2）在指定VUE页面中
【uniapp】触底加载事件 onReachBottom 不生效
最新发布
花间半盘棋
11-22 1433
是不是用了局部滚动 ；检查 css 是不是写了。
小程序触底事件onReachBottom和scroll-view冲突无法触发解决
蔡定交
07-01 1334
<scroll-view scroll-y @scrolltolower="enevtname" </scroll-view> 记录一下，在scroll-view中使用onReachBottom是无效的，用@scrolltolower这个事件来监听就好使了。
overflow 监听是否滑动到底部
唐僧的专栏
05-18 1520
overflow 监听是否滑动到底部
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
08-03
描述中提到的“故事背景”是一个开发者在开发过程中遇到的问题，他们使用了`overflow: scroll`来创建可滚动的内容区域，但在iOS设备上，滚动体验并不理想，出现了卡顿。作者希望通过分享解决办法来总结经验。 标签...
react-auto-scroll:自动将元素滚动到底部
05-17
@ brianmcallister /React自动滚动 自动将元素滚动到底部react-auto-scroll是一个React组件，它将包含元素自动滚动到底部。目录演示版托管的演示： : 您也可以在本地运行演示。 开始： git clone git@github....
ngx-infinite-scroll：角度的无限滚动指令
01-31
从Angular 6及ngx-infinite-scroll@THE_VERSION.0.0开始ngx-infinite-scroll@THE_VERSION.0.0 对于Angular 4和Angular = ^ ngx-infinite-scroll@0.8.4使用ngx-infinite-scroll@0.8.4版本对于rxjs = <5.5.2的...
【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
$
02-20 7800
scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
uni-app 踩坑记录（持续更新）
weixin_43967105的博客
09-16 1958
Input： 1、Focus, h5平台根据各家浏览器决定是否自动聚焦； 2、支付宝无法自动聚焦且ios在支付宝平台发起验证码，键盘没有一键粘贴板； 3、百度在自动聚焦时blur 事件总是先于focus 事件，因此在多个input 存在的情况下，要靠程序自动唤起B input 聚焦，必然会先执行A 的失焦事件，然后再执行B的聚焦事件； 4、不同机型在允许自动聚焦功能的平台上，聚焦和失焦的事件处理也会有差别，ios 普遍失焦事件先于聚焦事件，在频繁地操作聚焦失焦时，...
【uniapp】解决scroll-view滚动视图组件无法自适应高度问题
TA远方
11-30 4379
在做前端做页面通常使用的是弹性伸缩布局的，它的好处是，可以达到无缝拼接布局，充分占用剩余的空间布局，但有个滚动视图组件显然无法自适应高度，固定高度那不是自己想要的，现在要实现自适应高度，要怎么处理才好呢。
uniapp利用scroll-view实现滚动触底加载
cautionHua的博客
07-05 3143
微信小程序官方在scroll-view中也提供了一种触底加载的方式，也没有我写的这么复杂，在uniapp中要改写成vue的方式。可以使用以下这种方式来做滚动触底加载，但是官网提示长列表性能不太好，目前也没有更好的方式，暂时先这么处理。才能生效，两个方式各有优劣，选择适合自己的就行了。
uniapp 上拉加载
wow~
05-18 1452
先创建一个 scroll-view 标签 在标签中设置 滚动方向 scroll-y 就值上下滚动 scroll-x 就是左右滚动 然后设置高度 这个高度等于 屏幕高度 减 头部标题的高度 这里有两中获取的方法 一中是js动态获取 // 高度自适应 uni.getSystemInfo({ success: (res) => { console.log(‘res:’, res) let height = res.windowHeight - uni.upx2px(100); this.swiperh
css滚动条使用
echo_Ae的博客
11-16 1328
1、实现滚动条 给DIV限定宽度或高度,并指定overflow样式为auto,这样当内空超出后就会自动出现滚动条了.如 div style="width:100%; height: 99%; overflow:auto;"> img src="xxx" style="width:300px; height:300px;"> div> 正常来说 我们宽度都是设置为 百分百的
uniapp 解决onReachBottom失效
热门推荐
qq_43351090的博客
10-21 1万+
一、为什么失效？ 当给最外层view（container）设置overflow样式后，onReachBottom钩子不触发，去除overflow后，可触发，但存在某些样式问题。 .container{ height: 100vh; background-color: #F5F6FA; overflow: scroll; } 二、解决方案 1.去除overflow，直接修改page样式 page{ height: 100vh; background-color: #F5F6FA; }
onReachBottom不生效的原因（再骂自己一次）
weixin_53465412的博客
03-15 3480
onReachBottom和onPageScroll不生效，和普罗大众不一样的错法（55555555）
uniapp onReachBottom 无效
qq_42339350的博客
07-13 1647
两个可能 1 scroll-view 是不能触发的，scroll-view自己有对应的方法监听触底 2 设置了 overflow-y: scroll; ，也是没法触发的
uniapp 使用了overflow-y: scroll; 如何做分页效果
06-02
如果你在uniapp中使用了 `overflow-y: scroll;` 属性，实现了滚动效果，那么可以通过监听滚动事件，来实现分页效果。 具体实现步骤如下： 1. 在页面中添加一个滚动容器，例如： ``` <view class="scroll-container" style="height: 100vh; overflow-y: scroll;"> <view class="list-item" v-for="(item, index) in items" :key="index">{{ item }}</view> </view> ``` 2. 在页面的 `data` 中添加一个变量 `pageNum`，用于记录当前页码，例如： ``` data() { return { items: [], // 数据列表 pageNum: 1, // 当前页码 } }, ``` 3. 在页面中使用 `onScrollToLower` 事件监听滚动到底部的事件，例如： ``` <view class="scroll-container" style="height: 100vh; overflow-y: scroll;" @scrolltolower="loadMoreData"> <view class="list-item" v-for="(item, index) in items" :key="index">{{ item }}</view> </view> ``` 4. 在 `loadMoreData` 方法中，根据当前页码加载对应的数据，并将页码加1，更新 `pageNum` 变量，例如： ``` methods: { loadMoreData() { // 根据当前页码加载对应的数据 const newData = loadData(this.pageNum); this.items = this.items.concat(newData); // 将页码加1，更新 pageNum 变量 this.pageNum += 1; } }, ``` 5. 在 `loadData` 方法中，根据传入的页码，加载对应的数据，例如： ``` function loadData(pageNum) { // 根据 pageNum 加载对应的数据 const data = []; for (let i = 0; i < 10; i++) { data.push(`Item ${(pageNum - 1) * 10 + i + 1}`); } return data; } ``` 6. 最后，根据你的实际情况，可能还需要在页面加载时，先加载第一页的数据，例如： ``` onLoad() { // 加载第一页的数据 const newData = loadData(this.pageNum); this.items = this.items.concat(newData); // 将页码加1，更新 pageNum 变量 this.pageNum += 1; } ``` 通过以上步骤，即可实现基于滚动容器的分页效果。当滚动到底部时，会自动加载下一页的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值