小程序uniapp 回到页面顶部

原创

已于 2022-04-12 17:34:49 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #时间戳 #javascript

于 2021-12-01 13:59:14 首次发布

本文介绍如何在uniapp小程序中使用scroll-view组件，配合HTML、CSS和JavaScript代码，实现在页面滚动到顶部的功能。详细步骤包括查看官网文档、理解组件用法，并展示相关代码段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序uniapp 回到页面顶部

官网地址：https://uniapp.dcloud.io/component/scroll-view

实现的效果如下图所示（样式有点丑可以自己调）

在这里插入图片描述

HTML部分

     <scroll-view
        scroll-y
        class="store_scroll"
        :lower-threshold="20"
        :scroll-top="scrollTop"
        @scroll="scrollEvent"
        @scrolltolower="loadMore">
        <view>内容</view>
     </scroll-

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LW0512

关注关注

2
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Uniapp中实现加载更多、下拉刷新、返回顶部功能

duansamve的博客

01-11

1008

/ 导航栏中显示加载状态。// 导航栏中隐藏加载状态。env(safe-area-inset-bottom)：css中获取底部安全区高度；// 页面中隐藏加载状态。title: '加载中'// 页面中显示加载状态。

uniapp开发微信小程序教程（二）实现一个页面

weixin_43585799的博客

12-23

3378

文章目录一、拿到需求原型并分析一、设计页面结构：二、UI框架介绍及ColorUI三、在项目中引入用到的组件四、开发页面一、拿到需求原型并分析原型如下所示：一、设计页面结构： 小程序页面结构大体由3部分构成：顶部导航栏 + 内容区 + 底部导航栏。我们要做的页面：顶部导航栏 + 内容区。顶部导航栏从左到右包括：图标 + 返回按钮内容区从上到下包括：时间选择组件 + tab切换组件 + 块状条形内容 + 分为三块的块状条形内容 + 饼图。二、UI框架介绍及ColorUI UI是什么先来说

参与评论您还未登录，请先登录后发表或查看评论

【uniapp 返回顶部】

前端-CV全粘工程师

08-11

1236

将页面滚动到目标位置。

uni-app学习笔记三十四--刷新和回到顶部的实现

热门推荐

Tianxiaoxixi的博客

06-13

1万+

uniapp中的返回顶部

uniapp实现回到顶部功能

qq_38937194的博客

07-24

886

【代码】uniapp实现回到顶部功能。

uni-app 最美的回到顶部

码蝗的博客

06-30

970

html <view class="top" :style="{'display':(flag===true? 'block':'none')}"> <uni-icons class="topc" type="arrowthinup" size="50" @click="top"></uni-icons> </view> js data() { return { flag:false } }, meth...

uniapp小程序顶部

01-11

### 自定义 UniApp 小程序顶部导航栏样式和功能 #### 设置自定义导航栏模式为了启用自定义导航栏，在 `pages.json` 文件中针对特定页面配置 `"navigationStyle": "custom"` 属性[^3]。 ```json { "path": "pages...

uniapp小程序 滚动条回到顶部

09-22

在Uniapp小程序中，要将滚动条回到顶部，可以使用uni.pageScrollTo方法，并将scrollTop参数设置为0，表示距离页面顶部的距离为0。具体代码如下： ``` uni.pageScrollTo({ scrollTop: 0, duration: 0 }); ``` ...

uniapp返回顶部的方法

weixin_44600235的博客

12-12

1133

解决办法 1.删除项目中的node_modules文件夹 2.在项目终端重新安装依赖，npm install 如果安装中间出现这样的问题，运行 npm audit fix来修复他们,如下图安装完成之后如果有下面这句代码require（“vue/types/umd”）就要注释掉 3.重新启动 ...

uniapp——一键回到顶部（双击事件）

努力、拼搏、奋进

08-05

999

uniapp——一键回到顶部（双击事件）

【uni-app】实现仅在当前页面点击tabBar回到顶部

weixin_46939955的博客

09-04

1629

uni-app仅在当前页面点击tabBar回到顶部页面数据过多时，需要有回到顶部的功能。具体功能为，在当前页面点击，回到首页，而从其他页面回来后，页面保持在离开之前的位置。实现过程 data() { return { ClickOtherTabBar:false } } onHide(){ //页面生命周期函数，离开当前页面时被触发 this.ClickOtherTabBar = true }, onTabItemTap(e) { //tabbar点击事件函数 if(

uni-app中返回顶部的方法

weixin_46511008的博客

08-10

5152

uni-app中返回顶部的方法

uniapp页面回到顶部方法

topuu的博客

02-21

8108

uniapp页面回顶

uniapp实现点击按钮回到顶部

wwwoow_的博客

11-07

453

【代码】uniapp实现点击按钮回到顶部。

uniapp回到页面顶部

stars______的博客

01-24

1270

onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮 if(e.scrollTop>150){ //当距离大于150时显示回到顶部按钮 this.topState = true }else{ //当距离小于600时显示回到顶部按钮 this.topState = false } }, methods: { top() { //回到顶部 uni.pageScrollTo({ scrollTop: 0, duration: 300 .

uniapp页面返回到顶部

游九尘的博客

05-23

592

将页面滚动到目标位置。

回到顶部功能：uniapp微信小程序回到顶部的几种方法

南北极之间

05-23

4380

回到顶部功能：uniapp微信小程序回到顶部的几种方法

小程序uniapp 回到页面顶部

小程序uniapp 回到页面顶部

官网地址：https://uniapp.dcloud.io/component/scroll-view

实现的效果如下图所示（样式有点丑 可以自己调）

HTML部分

实现的效果如下图所示（样式有点丑可以自己调）