小程序-uniapp:实现锚点连接/锚点跳转

简介: 小程序-uniapp:实现锚点连接/锚点跳转

Uniapp支持锚点连接,可以通过以下步骤实现锚点连接

一、在需要设置锚点的页面,为需要跳转的部分设置id属性。

例如,设置一个id为“section1”的元素:

<div id="section1">这是需要跳转到的部分</div>

二、在需要跳转到锚点的页面,使用uni.navigateTouni.redirectTo方法,搭配URL参数的方式实现跳转。

例如,跳转到id为“section1”的部分:

uni.navigateTo({
  url: '/pages/destinationPage?to=section1'
})

三、在目标页面,使用uni.createSelectorQuery方法获取目标元素,并使用scrollIntoView方法滚动到目标元素。

例如,在destinationPage页面的onLoad方法中实现:

onLoad: function (options) {
  // 获取要滚动到的元素id
  var to = options.to;
  // 获取目标元素
  uni.createSelectorQuery().select('#' + to).boundingClientRect(function(rect){
    // 使用scrollIntoView方法滚动到目标元素
    uni.pageScrollTo({
      scrollTop: rect.top,
      duration: 500
    })
  }).exec();
}

通过以上步骤,就可以在Uniapp中实现锚点连接了。

四、测试成功

相关文章
|
6天前
|
API
uniapp使用路由名称跳转
【9月更文挑战第11天】在UniApp中,可通过定义路由名称实现页面跳转,需在`pages.json`中设置页面的`name`属性。使用`uni.navigateTo`等API并指定名称即可跳转,例如`name: &#39;detailPage&#39;`。目标页面可在`onLoad`函数中获取传递的参数,这种方式使代码更清晰且便于维护,尤其适合大型项目。
|
25天前
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
|
20天前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
44 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
9天前
|
小程序 开发工具
app跳转微信小程序,使用明文scheme拉起
app跳转微信小程序,使用明文scheme拉起
34 4
|
20天前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
44 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
23天前
|
移动开发 小程序 前端开发
|
29天前
|
小程序 前端开发
|
1月前
|
存储 小程序 JavaScript
|
23天前
|
小程序 安全 前端开发
支付宝小程序究竟藏着怎样的秘密?竟能成为连接亿万用户的桥梁!
【8月更文挑战第27天】随着移动互联网的发展,小程序已成为连接用户和服务的关键桥梁。支付宝小程序凭借其庞大的用户群和丰富的生态场景,为开发者提供了巨大的发展空间。本文提供了一份支付宝小程序开发者指南,帮助开发者从开发准备、开发流程、最佳实践到示例代码全面掌握支付宝小程序开发技能,从而连接亿万用户。开发者需先注册支付宝开发者账号,安装小程序开发者工具,并了解小程序架构;然后按步骤创建项目、编写代码、调试预览直至发布。此外,还需注重优化用户体验,充分利用支付宝生态资源,关注安全合规问题,以实现小程序的成功。
24 0
|
1月前
|
存储 小程序 JavaScript