小程序-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中实现锚点连接了。

四、测试成功

相关文章
|
1天前
|
小程序
uniapp-微信小程序-上拉和下拉触底刷新
uniapp-微信小程序-上拉和下拉触底刷新
6 0
|
2天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
|
5天前
|
JavaScript 小程序 前端开发
小程序;vue;uniapp优缺点(各5条)
小程序;vue;uniapp优缺点(各5条)
14 1
|
5天前
|
移动开发 开发框架 小程序
UniApp与微信小程序介绍及区别
UniApp与微信小程序介绍及区别
13 0
|
12天前
|
移动开发 小程序 安全
使用阿里云短信+微信短链接跳转微信小程序
此内容是关于使用阿里云短信带传递参数的微信短链接跳转到微信小程序。首先,需要准备微信开发者工具和一个已认证的小程序。接着,开通云开发并配置云开发权限。然后,配置H5静态网页,包括设置云开发权限和处理不同设备的跳转方式。最后,上传云函数并修改其权限,获取微信短信链接,配置短链接参数,并开通阿里云短信服务以进行测试验证。整个过程涉及到了微信开发者工具、云开发、H5页面配置、云函数的创建和部署以及阿里云短信服务的开通和使用等步骤。
38 0
|
18天前
|
缓存 小程序
uniapp读取(获取)缓存中的对象值(微信小程序)
uniapp读取(获取)缓存中的对象值(微信小程序)
12 1
|
22天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
44 4
|
22天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
32 3
|
22天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
56 3
|
22天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的商品展示的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的商品展示的详细设计和实现
31 3