微信小程序页面跳转后回到顶部

最新推荐文章于 2024-05-18 14:53:16 发布
最新推荐文章于 2024-05-18 14:53:16 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinci___eryi/article/details/123915459
版权
本文介绍了在微信小程序中，如何在页面跳转后返回顶部。关键在于使用scroll-view组件的scroll-top属性，并确保page和scroll-view的高度设置正确。通过示例代码展示了一个从demo页面跳转至demo1，再返回demo时能定位到顶部的功能。
摘要由CSDN通过智能技术生成

做小程序时经常遇到页面比较长的情况，经过跳转后，又该如何回到页面顶部呢？

主要用到scroll-view 组件中 scroll-top设置页面顶部距离

代码有以下功能：点击demo页面底部的跳转至demo1，会进入demo1页面，此时demo页面已处于底部，点击demo1中的跳转至demo后，页面会从demo1变为demo，同时位于demo顶部

demo页面代码：

wxml:

<scroll-view scroll-y scroll-top="{
  {topNum}}">
 <view class="container">1</view>
 <view class="container1">2</view>
 <view class="container">3</view>
 <view class="container1">4</view>
 <view class="container">5</view>
 <view class="container1">6</view>
 <view class="container">7</view>
 <view class="container1">8</view>
 <navigator url="/
最低0.47元/天 解锁文章
糖豆甜呀甜
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 - 返回顶部解决方案（滚动回到顶部）
王佳斌
05-13 3148
前言 对于小程序长列表，当页面滚动一定距离时，出现返回顶部按钮方便用户回到顶部。 本文将提供给您一个完整的示例，代码干净整洁， 您可用于自己的项目，具体效果如下图所示： 解决方案 核心思路：利用钩子函数进行监听滚动，到达一定值后显示返回顶部自定义按钮。 您找个新页面，一键复制运行起来即可。 <view wx:for="{{100}}" wx:key="index"> 制造点数据 </view> <view wx:if="{{ backTop }}" bindtap
微信小程序实例：跳转到顶部实例
03-29
总所周知，小程序不能操作dom，那么我们要怎么实现在页面滚动到一定条件的时候，显示gotop图标，点击后跳转到页面的顶部呢？ 这里小程序有个组件是可以实现的，那就是scroll-view组件，他具有很多的属性，其中我们要利用到以下两个属性来处理：         scroll-topNumber设置竖向滚动条位置       bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 通过滚动触发事件，获取距离文档顶部的scrollT
页面跳到顶部的方法
weixin_34327761的博客
07-27 402
页面跳到顶部的方法 一、使用锚点链接 毫无疑问，使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后我们在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置。 示例代码如下： <!-- 定义一个名称为top的锚点链接 --> <a name="top"></a> <!--...
微信小程序回到顶部
最新发布
我是小鹏呀的博客
05-18 228
wxml页面 scroll-with-animation：使用滚动动画过渡。wxml页面，catchtap阻止冒泡事件。
微信小程序-页面跳转到对应的顶部tab
会飞的蜗牛
06-06 4070
hello，首先，我是一个菜鸟，不足之处指点批评！ 需求：我需要在index页面点击一个按钮跳转到另一个页面（是一个底部tab）的顶部tab的特定某个选项卡。额，没说清楚，看图展示： 当我点击装饰公司进入 装饰公司的tab。 index页面跳转至 find页面。 思路：在app.js设置变量，通过点击按钮设置变量的值，然后在find.js获取变量值，判断是谁点击而做出相应的动作。
微信小程序页面返回顶部效果
YL
06-17 412
给大家分享一个微信小程序页面返回顶部的效果，具体内容如下： 1、wxml代码 <scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}'> <view>1</view> <view>1</view> <view>1</view> <view>1</view> <view>1&l
微信小程序 页面跳转传值实现代码
12-03
在微信小程序的开发中，页面间的跳转与数据传递是一项重要的功能。由于微信小程序的页面栈最多只能包含五层页面，因此在设计复杂的导航流程时需要特别注意。本篇文章主要探讨的是如何在满足这一限制的情况下，实现从...
微信小程序之页面跳转和参数传递的实现
08-29
在微信小程序开发中，页面跳转和参数传递是不可或缺的功能，它们使得用户可以在不同页面间顺畅地导航并传递数据。本文将详细介绍这两种技术的实现方法。 首先，微信小程序提供了类似于HTML中`<a>`标签的`...
微信小程序常见页面跳转操作简单示例
11-26
本文将详细讲解微信小程序中常见的五种页面跳转操作，以及如何在WXML（微信小程序的标记语言）中实现页面跳转。 1. **保留当前页面，跳转到应用内另一个页面**：通过`wx.navigateTo`方法可以实现这一功能，它不会...
微信小程序完美购物车抛物线（飞入效果）+ 回到顶部
05-30
本教程将详细讲解如何实现"微信小程序完美购物车抛物线（飞入效果）+ 回到顶部"这一功能。 首先，让我们分析“购物车飞入效果”。这是一种常见的UI动画，当用户点击某个按钮或执行特定操作时，购物车图标会以抛物线...
页面从底部跳转到顶部
weixin_43853424的博客
01-08 875
在我们平常浏览网页的时候，会发现有些网页的底部会有按钮可以跳转到顶部，下面用js给大家介绍一个方法： css样式，把div高度设大，就会出现滚动条 &amp;lt;style type=&quot;text/css&quot;&amp;gt; *{ margin: 0; padding: 0; } div{ position: relative; width: 500px; ...
微信小程序–特定区域滚动到顶部时固定的方法
01-03
项目要求： 如图所示，当页面滚动到导航条到达搜索栏下方时固定，向上滚动到导航条位置时又恢复原样。 以下是代码展示：  1.wxml <scroll xss=removed scroll-y=true bindscroll=scrollTopFun> <view class={{top>130 ? 'topnav' : ''}}> <--这里写大于130，表示距离顶部130rpx时固定，可根据需要修改--> ... </view> </scroll> 2.wxss .topnav{ pos
页面跳转进显示顶部
碉堡飞哥的博客
09-27 1020
window.scroll(0, 0);
JS跳转到顶部的方法
weixin_30636089的博客
09-29 370
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JS</title> </head> <body> 　　<div class="" style="height: 2000px;">top toptoptopto...
微信小程序回到顶部的两种方式
皮皮的博客
09-04 830
微信小程序回到顶部的两种方式 一,使用view形式的回到顶部 HTML部分代码： <!--点击回到顶部按钮--> <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image> CSS部分代码： /* 返回顶部 */ ....
告别繁琐滑动，微信小程序一键回到顶部功能
Shids_的博客
09-28 6476
告别繁琐滑动，微信小程序一键回到顶部功能
微信小程序底部触发/顶部触发，点击跳转顶部
Sink
02-27 772
微信小程序底部触发/顶部触发，点击跳转顶部
【小程序】返回到顶部的实现方式
Meditation_Crazy
11-03 278
前言 返回到顶部的实现方式：https://github.com/dcloudio/uni-app/blob/master/docs/component/scroll-view.md
微信小程序页面导航及跳转
06-09
微信小程序页面导航及跳转可以通过以下几种方式实现： 1. 导航栏跳转：在页面的 json 文件中设置 navigationBarTitleText 字段，即可在顶部显示导航栏，并在导航栏中添加跳转链接。 2. 通过按钮跳转：可以在页面中放置按钮，在按钮的事件处理函数中使用 wx.navigateTo 或 wx.redirectTo 方法进行跳转。 3. 通过超链接跳转：可以在页面中使用 a 标签添加超链接，指向需要跳转的页面地址。 4. 通过 TabBar 跳转：可以在 app.json 文件中设置 tabBar 字段，即可在页面底部显示 TabBar，并在 TabBar 中添加跳转链接。 需要注意的是，wx.navigateTo 方法可以实现页面跳转并保留当前页面，而 wx.redirectTo 方法则会关闭当前页面并跳转到目标页面。此外，小程序中还可以使用 wx.switchTab 方法实现 TabBar 页面之间的跳转。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值