uniapp scroll-view组件滚动到后点击按钮回到组件顶部方法

最新推荐文章于 2025-10-13 15:50:36 发布
原创 最新推荐文章于 2025-10-13 15:50:36 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文介绍了一个在uniapp中解决scroll-view组件滚动到底部后，通过点击按钮无法回到顶部的问题。作者发现官方提供的设置scrollTop为0的方法无效，但采用设置scrollTop为Math.random()的技巧可以实现预期效果。文中提供了相关代码示例，包括底部提示视图和goTop函数，实测有效。

前言

uniapp scroll-view组件滚动到底后点击按钮回到组件顶部方法
官方文档设置 this.scrollTop=0的方法无效，在网上找了个这个方法。不知道是什么原理
this.scrollTop = Math.random();

 <view class="bottom-tips" @click="goTop" id="gototop">没有更多菜单了哦~ </view>

   goTop: function (e)</
最低0.47元/天 解锁文章
【uniapp-scrollView滚动到底部+滚动到顶部加载更多】
weixin_47416539的博客
12-18 1899
【代码】【uniapp-scrollView滚动到底部+滚动到顶部加载更多】
uniapp将页面滚动到目标位置
Smile_ping的博客
06-28 6554
uniapp将页面滑动到目标位置或返回顶部的两种实现方式...
uniapp中页面和scrollview两种滚动到顶部原来这么优雅
m0_61384071的博客
09-27 3511
uniapp中页面和scrollview两种滚动到顶部
【微信小程序中运用scroll-view实现区域滚动和回到顶部 基础篇 1 （结合实例）】
最新发布
2301_76624160的博客
10-13 885
本文介绍了微信小程序中scroll-view组件的两种实用场景：1. 实现纵向区域滚动（可应用于上拉加载更多）2. 实现回到顶部功能
小程序scroll-view组件纵向滚动返回顶部
反正你猜不到我是谁
09-30 2763
小程序scroll-view 回到顶部
uniapp scroll-view 回到顶部
爱吃涮肉的博客
10-24 2177
只是设置scroll-top时不生效，这里需要注意@scroll 方法。列表页数为1的时候列表滚动到顶部。主要是未了及时显示新添加的数据。scroll-top设置。
uniapp scroll-view直接滚动到顶部和底部
03-03
### UniApp 中 `scroll-view` 组件滚动到顶部和底部的方法 #### 使用 JavaScript 控制滚动位置 为了实现 `scroll-view` 滚动到顶部或底部的功能，可以通过设置 `scrollTop` 属性来控制垂直方向上的滚动位置。对于...
uniapp scroll-view u-back-top
03-18
首先，用户的需求是当滚动一定距离后显示回到顶部按钮，点击后平滑滚动到顶部。因此，我需要考虑以下几个步骤： 1. **scroll-view的基本配置**：启用纵向滚动（scroll-y），设置滚动事件监听（bindscroll），以获取...
uniapp中scroll-view如何滚动到指定位置
01-09
### 实现 `scroll-view` 组件滚动到指定位置 在 UniApp 中，可以通过设置 `scrollTop` 属性来控制 `scroll-view` 的垂直滚动位置。此属性接受一个数值参数，表示距离顶部的距离（单位为像素）。下面是一个具体的...
uniapp设置scroll-view滚动位置
01-18
### 如何在 UniApp 中设置 `scroll-view` 组件的初始滚动位置及动态调整方法 #### 设置 `scroll-view` 初始滚动位置 为了设定 `scroll-view` 的初始滚动位置，可以在创建视图时通过绑定 `scroll-top` 或者 `scroll...
uniapp微信小程序scroll-view 回到顶部
wltsysterm的博客
04-17 2759
问题 scroll-view是一个具备上拉加载下拉刷新功能的插件，可以通过代码设置当前scroll-view的滚动条的位置，按照官方的方案，直接设置scroll-top属性是不生效的： 解决 经过测试如下方法可行： html代码如下： <scroll-view enable-back-to-top=true :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrollto
uni-app中的返回顶部
热门推荐
Tianxiaoxixi的博客
06-13 1万+
uniapp中的返回顶部
【uniapp】基于scroll-view 实现发布评论后滚动到最顶部
m0_61775140的博客
09-06 2236
scroll： 滚动时触发，可以获取滚动条高度， event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}：这是一个uniapp的项目里的小功能，在此记录一下，当用户滚动页面最底部，接着在此输入留言并点击发送按钮后，滚动条要滚动到页面最顶部！至此，评论完成后滚动到页面最顶部，这个功能就算圆满完成啦！scrollTop: 0, // 记录滚动条位置，距离顶部为0。下面是要实现的效果展示图！
uni的scroll-view内部点击一键回到顶部
jieruis的博客
10-24 1723
/视图会发生重新渲染//当视图渲染结束 重新设置为0});
uniapp scroll-view组件滚动到底后点击按钮回到组件顶部方法
weixin_46479342的博客
11-14 2461
uniapp scroll-view组件滚动到底后点击按钮回到组件顶部方法 官方文档设置 this.scrollTop=0的方法无效，在网上找了个这个方法。 this.scrollTop = Math.random(); <view class="bottom-tips" @click="goTop" id="gototop">没有更多菜单了哦~ </view> goTop: function (e) { this.scrollTop = Math.ra
uni-app scrollview滚动到顶部或任意位置
Gao_Chuanhui的博客
06-15 3623
需求：对物资列表进行盘点的时候，退出了盘点，再重新打开单据时，能自动跳转到上一次退出的位置上 使用的是uni-app 的scroll-view组件 具体实现： 页面
uniapp：scroll-view触底加载、下拉刷新、返回顶部
FIRE
05-18 3547
选择uniapp自带的下拉刷新还是scroll-view看场景。场景：从首页跳转到别的页面再返回来的时候，直接返回首页顶部。顺便解决了ios下拉，顶部和底部有白屏的问题。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黒客与画家

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值