uniapp 滚动组件 scrolltolower 事件不触发

最新推荐文章于 2024-05-15 23:08:53 发布
最新推荐文章于 2024-05-15 23:08:53 发布
阅读量429 收藏
点赞数
分类专栏： uniapp scroll-view 文章标签： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43667390/article/details/134779038
版权

在uniapp中使用scroll-view组件时，需要注意以下几点：

  1. 如果你想实现横向滚动，需要给scroll-view设置一个宽度；如果你想实现纵向滚动，需要给scroll-view设置一个高度。
  2. 确保滚动的不是页面的滚动条，而是scroll-view组件内部的滚动内容。
weixin_43667390
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
日历组件在很多应用中都是不可或缺的部分，例如在线预订、行程规划等。在uni-app中，开发一个具备自定义文案和上下滑动选择日期功能的日历组件，可以大大提升用户体验。下面将详细解释这个组件的相关知识点。 1. **...
基于vue 兄弟组件之间事件触发(详解)
09-09
下面小编就为大家分享一篇基于vue 兄弟组件之间事件触发(详解)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uniapp中scroll-view的scrolltolower事件不触发
热门推荐
devil的博客
05-26 1万+
uniapp中scroll-view的scrolltolower事件不触发 有两种情况 第一种情况 scroll-view中的订单列表详情没有用一个view包起来 <view class="navbar"> <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrent == item.type}" @click="tabClick(item.type)"&
uni-app中scroll-view不触发@scrolltolower事件（某些机型）
weixin_46533954的博客
03-11 7368
背景:uni-app中scroll-view中用@scrolltolower的时候需要设置lower-threshold的值，(a)当设置为10的时候，某些机型滑动太快时到了底部再也划不动同时也没触发这个事件，需要往下划一下再接着往上滑才会触发，比如红米10；（b)当设置为0的时候,红米10滑倒底部直接不会触发的，怎么滑都不会触发，但是ios系统的都没问题
uniapp的scroll-view中的scrolltolower事件偶尔不执行
最新发布
weixin_39579031的博客
05-15 655
uniapp的scroll-view中的scrolltolower事件偶尔不触发，页面已经上拉到最底部了，然后一直上拉滑动（这时页面已经处于最底部），这个事件一直不触发，只是偶尔会发生。在一直上拉不触发的情况下，把页面往下拉滑动一点点，这个事件就触发了，官方文档也有人遇到一样的问题，在滑动时记录滑动开始和结束的状态，并在滑动结束时检查状态是否变化。这种方法确保了即使在 scrolltolower 事件偶尔不触发的情况下，也能通过代码逻辑来手动触发数据加载，解决了滑动到底部时无法加载更多数据的问题。
uniapp scroll-view 上划 分页/加载 遇见的问题
qq_17627195的博客
09-17 2332
问题一：scrolltolower 等方法不触发 1. 使用scroll-view的时候， @scrolltolower 等不生效/不触发，是因为 scroll-view 没有一个固定的高度，所以需要给 scroll-view 设定一个高度。 2. uni-load-more 这个是点击触发，只是做一个显示的作用。 问题二：scroll-view 高度设置问题 3. 不能使用 css 的 calc() ，这样是无效的。 4. 可以在 onReady 页面
scroll-view组件上拉加载多次触发scrolltolower事件
jumpdo的博客
10-22 7196
出现这个情况的原因是scroll-view组件有个lower-threshold属性（默认50），当你上拉加载的时候除非你碰到底部不然你在0~50这个区间内滑动的话会一直触发scrolltolower事件。 解决方法就是设置一个开关，当开关为false时直接return。触发scrolltolower事件时把开关设置为false，而且只有开关为true时才会继续执行下面的操作，然后将开关设置为tr...
uniapp scroll-view scrolltolower触底事件有时候不触发的问题
ZGG的博客
02-24 1176
出现触底不触发加载需要上拉在下拉才触发的问题
uni-app微信小程序scrollView的scrolltolower无法触发上拉加载
R__Zoro的博客
05-07 759
uni-app微信小程序scrollView的scrolltolower无法触发上拉加载
2021-11-06 uniapp解决scroll-view滑动事件失效问题@scrolltolower
weixin_44357065的博客
11-06 3930
uniapp解决scroll-view滑动事件失效问题@scrolltolower 1、首先scroller-view需要给定高度，这里的高度最好不要是width：num%这种类型的，很容易不生效。 2、父容器最好也指定高度 下面通过举例来说明 <template> <view class="main"> <scroll-view class="scroll-content" scroll-y @scrolltolower="reachBottom">
Vue 组件间传值及事件触发Demo
09-07
1. 自定义事件：如上所述，子组件可以通过`$emit`触发自定义事件，父组件通过`v-on`或简写`@`监听并处理这些事件，这就是事件回调的基础。 ```html <!-- 子组件 --> 点击我 export default { methods: { ...
判断滚动条滑到底部触发事件(实例讲解)
08-28
下面小编就为大家带来一篇判断滚动条滑到底部触发事件的实例讲解。具有很好的参考价值。一起跟随小编过来看看吧，希望对大家有所帮助
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
uniapp解决scroll-view滑动事件失效问题@scrolltolower
明耀的博客
05-04 5010
uniapp解决scroll-view滑动事件失效问题@scrolltolower 1、首先scroller-view需要给定高度，这里的高度最好不要是width：num%这种类型的，很容易不生效。 2、父容器最好也指定高度 下面通过举例来说明 <template> <view class="main"> <scroll-view class="scroll-content" scroll-y @scrolltolower="reachBottom">
解决 uni-app vue3 scroll-view 组件 @onScrollToLower 事件在移动设备键盘展开时有时不会触发的BUG
qq1014156094的博客
03-19 737
用 @scroll 事件手动实现判断是否滚动到底部
小程序中使用scroll-view滚到底部多次触发scrolltolower
一个前端小白的瞎扯
12-28 8792
最近写小程序的时候遇到一个问题，使用scroll-view组件的时候，有一个属性叫做bindscrolltolower，滚动到底部/右边，会触发 scrolltolower 事件。 不知道是代码编写有问题，还是组件问题。 如果将页面上拉到距离底部一定的高度之后，再松手，回滚到底部之后就会多次触发加载函数(loadMore)。 像这样子 查阅了网上的一些解决方案 1.scroll-view有一个...
【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
$
02-20 7819
scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
uni-app中scroll-view中@scrolltolower不触发事件
drlsxs的博客
08-08 4049
这个问题是需要给 scroll-view 标签设置固定的高度 设置高度为1000px; 设置高度为 height = calc(100% - 36px ); 这里的36px 是指这个标签顶部的tab 栏 的高度
微信小程序中 scroll-view 属性 bindscrolltolower 事件触发不生效
徐同泽的博客
01-15 1万+
最近做公司微信小程序的项目时 遇到的问题 记录一下文帝防止日后出现相同的错误 问题所在：处理滚动到底部 触发滚动到底部事件 (bindscrolltolower) 的时候 并没有 生效！ 经过多方面的资料排查，以及官方文档的查询 终于解决了 本人的困惑 &lt;scroll-view class='pages-container' scroll-y="true" ...
uniapp 在组件里面如何实现上拉刷新下拉加载
06-01
在uniapp中，可以使用内置的组件`<scroll-view>`来实现上拉刷新和下拉加载。具体步骤如下： 1. 在`<scroll-view>`标签中添加`@scrolltolower`事件和`@scrolltoupper`事件，分别表示滚动到底部和顶部时触发的事件。 2. 在事件处理函数中，可以调用相应的方法来实现上拉刷新和下拉加载。 例如，可以使用`uni.request()`方法发送请求获取数据，然后将数据添加到页面的数据列表中，最后调用`uni.stopPullDownRefresh()`方法停止下拉刷新动画。 示例代码如下： ```html <template> <scroll-view class="list" :style="{height:height+'px'}" scroll-y @scrolltolower="loadMore" @scrolltoupper="refresh"> <ul> <li v-for="(item,index) in list" :key="index">{{item}}</li> </ul> </scroll-view> </template> <script> export default { data() { return { list: [], // 数据列表 page: 1, // 当前页数 limit: 10, // 每页数据条数 height: 0 // scroll-view的高度 } }, mounted() { // 获取 scroll-view 的高度 uni.getSystemInfo({ success: res => { this.height = res.windowHeight } }) // 页面初始化时加载数据 this.loadData() }, methods: { // 加载数据 loadData() { uni.request({ url: 'https://xxx.com/api/list', data: { page: this.page, limit: this.limit }, success: res => { this.list = this.list.concat(res.data) } }) }, // 下拉刷新 refresh() { this.page = 1 this.list = [] this.loadData() uni.stopPullDownRefresh() }, // 上拉加载更多 loadMore() { this.page++ this.loadData() } } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值