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

四、测试成功

相关文章
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
10 2
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
8 1
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
9 1
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
8 1
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
10 1
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的“狮子狗”二手交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的“狮子狗”二手交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
4 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的贵工程寝室快修小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的贵工程寝室快修小程序附带文章源码部署视频讲解等
8 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生心理健康测评管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生心理健康测评管理系统小程序附带文章源码部署视频讲解等
9 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生党务学习平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生党务学习平台小程序附带文章源码部署视频讲解等
6 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的微信小程序跑腿平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的微信小程序跑腿平台附带文章源码部署视频讲解等
6 0