【uniapp】scroll-view 实现自动滚动到最底部

最新推荐文章于 2024-05-11 16:27:19 发布
最新推荐文章于 2024-05-11 16:27:19 发布
阅读量858 收藏
点赞数
文章标签： uni-app
原文链接：https://blog.csdn.net/zs1028/article/details/127882509
版权
野生橙序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
Uniapp 平台兼容性 全端支持 引入组件即可
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我在.wxss里设置了高度为100%: .scrollStyle{ width: 100%; height: 100%; display: flex; flex-direction: column; } 居然无效，...
uni-app（vue3）实现对话界面，滚动条处于最下方！
weixin_48373171的博客
04-10 892
最近在做一个自己的全栈项目，前端用的，主要也是想巩固一下uni-app这方面的知识,其中有一个页面，涉及到ai聊天的功能，我理想型是类似文心一言或者微信聊天页面的效果，但是研究半天，发现uni-app的scroll-view这个内置组件并不能像写pc的滚动条那么灵活，因为在小程序或者app没有dom这个概念，网上找了一堆资源，基本上全是vue2版本的，密密麻麻的文字，真是看不下去，自己动手，丰衣足食。
uniapp自动滚动到底部
qq_34631220的博客
05-21 4114
scroll-into-view使用 <scroll-view scroll-y="true" style="height: 400rpx;" :scroll-into-view="bottomId" scroll-with-animation="true"> <view v-for="(item,index) in list"> <view :style=" 'height: 180rpx; background-color:' + ...
uniapp：scroll-view 聊天对话自动滚动到底部
最新发布
sunluyi的博客
05-11 296
uniapp scroll-view 聊天对话自动滚动到底部。
【Uniapp 】scroll-view 滚动条滚动到最底部
weixin_44435242的博客
11-18 7258
实时聊天等视图滚动到最底部，该方法不用计算容器的大小，宽高等问题
Uniapp滚动到底部
shuleijia的博客
12-27 4382
scrollToBottom() { this.$nextTick(function() { setTimeout(() => { uni.pageScrollTo({ scrollTop: 99999, duration: 0 }) }, 200) // 要加点延迟, 不然有可能不生效 }); } ...
uniapp聊天框滚动到底部（简单高效）
wordcsd的博客
09-14 2629
uniapp聊天框滚动到底部
uniapp开发app弹窗内滚动条滚动到底部，再滑动页面跟着滚动
weixin_45152848的博客
12-13 313
只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。
scroll-view组件 实现滚动到底部
u013302168的博客
07-30 935
或者，通过监听window的scroll事件。
微信小程序scroll-view实现字幕滚动
10-18
主要为大家详细介绍了微信小程序scroll-view实现字幕滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
微信小程序 scroll-view 实现自动滑动到底部
热爱思考、活力满满、开朗爱笑的年轻人
11-18 7313
<scroll-view class="scroll-wrapper" scroll-into-view="{{scrollTo}}" scroll-y="true" bindscroll="messageListScrolling" > <block wx:for="{{messageList}}" wx:key="id"> <view>你的scroll-view中的内容</view> </block> &lt
uniapp默认滚动到底部
Web995的博客
11-22 986
uniapp默认滚动到底部。
UNI-APP_uniapp页面滚动到底部
小歪博客
01-16 2447
uniapp 没有给出直接的 API, 不过可以用 pageScrollTo 来实现. scrollTop 参数给一个很大的数就可以了,要加点延迟, 不然有可能不生效 setTimeout(() => { uni.pageScrollTo({scrollTop: 99999, duration: 0}); }, 50);
uniapp 页面滚动到底部
MAIMIHO的博客
08-18 6971
uniapp 没有给出直接的 API, 不过可以用 pageScrollTo 来实现. scrollTop 参数给一个很大的数就可以了. 要加点延迟, 不然有可能不生效. setTimeout(() => { uni.pageScrollTo({scrollTop: 99999, duration: 0}); }, 50);
uniapp中页面和scrollview两种滚动到顶部原来这么优雅
m0_61384071的博客
09-27 2655
uniapp中页面和scrollview两种滚动到顶部
uniapp scroll-view实现自动滚动
04-27
要实现 `scroll-view` 的自动滚动，可以使用 `setInterval` 方法和 `scroll-view` 的 `scroll-top` 属性。具体实现方法如下： 1. 在 `scroll-view` 标签中添加 `scroll-top="{{scrollTop}}"` 属性，用于绑定滚动条的位置。 2. 在 `data` 中定义 `scrollTop` 和 `intervalId` 变量，分别用于存储滚动条的位置和定时器的 ID。 3. 在 `onLoad` 生命周期函数中，调用 `setInterval` 方法，设置定时器每隔一段时间执行一次滚动操作。 4. 在定时器中，先判断当前滚动条的位置是否已经到达底部，如果到达底部则将滚动条位置设置为 0，否则将滚动条位置加上一个适当的值，使其向下滚动。 下面是实现代码示例： ```html <scroll-view scroll-y="true" scroll-top="{{scrollTop}}"> <!-- 内容区域 --> </scroll-view> ``` ```js Page({ data: { scrollTop: 0, // 滚动条位置 intervalId: null // 定时器 ID }, onLoad: function() { // 开启定时器，每隔 3 秒执行一次滚动操作 this.data.intervalId = setInterval(() => { // 判断当前是否到达底部 wx.createSelectorQuery().select('.scroll-view').boundingClientRect((rect) => { if (rect.bottom <= wx.getSystemInfoSync().screenHeight) { this.setData({ scrollTop: 0 }); } else { // 每次滚动 20px this.setData({ scrollTop: this.data.scrollTop + 20 }); } }).exec(); }, 3000); }, onUnload: function() { // 清除定时器 clearInterval(this.data.intervalId); } }); ``` 在上面的代码中，通过 `wx.createSelectorQuery().select('.scroll-view').boundingClientRect((rect) => {...})` 获取 `scroll-view` 的位置信息，判断是否到达底部。如果到达底部，则将滚动条位置设置为 0；否则将滚动条位置加上一个适当的值，使其向下滚动。在页面销毁时，清除定时器，避免内存泄漏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值