小程序-uni-app:实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)

这篇具有很好参考价值的文章主要介绍了小程序-uni-app:实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

二、在需要跳转到锚点的页面,使用uni.navigateTo或uni.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中实现锚点连接了。

四、scroll-view设置锚点

:scroll-into-view="viewid"

let viewid = ref('')

点击元素,设置对于的元素id/锚点id  viewid 

测试成功

微信小程序实现锚点效果 scroll-view的scroll-into-view属性_小程序scrollview scrollintoview_FaxMiao的博客-CSDN博客

五、测试成功

参考链接

uniapp如何实现锚点跳转文章来源地址https://www.toymoban.com/news/detail-620085.html

到了这里,关于小程序-uni-app:实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 『uni-app、小程序』蓝牙连接、读写数据全过程

    点赞 + 关注 + 收藏 = 学会了 这是一次真实的 蓝牙收发数据 的全过程讲解。 本文使用 uni-app + Vue3 的方式进行开发,以手机app的方式运行(微信小程序同样可行)。 uni-app 提供了 蓝牙 和 低功耗蓝牙 的 api ,和微信小程序提供的 api 是一样的,所以本文的讲解也 适用于微信小程序

    2024年02月09日
    浏览(98)
  • 记录--『uni-app、小程序』蓝牙连接、读写数据全过程

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 这是一次真实的 蓝牙收发数据 的全过程讲解。 本文使用 uni-app + Vue3 的方式进行开发,以手机app的方式运行(微信小程序同样可行)。 uni-app 提供了 蓝牙 和 低功耗蓝牙 的 api ,和微信小程序提供的 api 是一样

    2024年01月21日
    浏览(53)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?

     微信小程序appId查看方法: 1)有后台登录权限的情况下:登录微信公众平台后, 微信公众平台 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/ 点击右上角logo,在“帐号信息”中找到AppID(小程序ID) 2)没有后台登录权

    2024年02月11日
    浏览(81)
  • 【uni-app】uni-app实现聊天页面功能(小程序)——布局篇

    在工作中使用uni-app参与开发一个小程序,其中要写一个简单的聊天页面,虽然功能不多(只有一个发送文字的功能),但是其中的细节比较多,也踩过很多坑,特此记录下来。要实现的页面如图所示,该篇主要讲讲如何布局(参考了很多文章之后根据页面需求进行一个整合)

    2024年02月05日
    浏览(101)
  • uni-app、小程序项目,在分包后访问地址无法跳转,出现异常:RangeError: Maximum call stack size exceeded

    使用uni-app开发小程序,由于微信小程序对代码包体积有大小限制,故分包处理,同时也做了分包预加载 分包后,一个点击事件,同一个跳转地址,在浏览器下正常跳转,在微信开发者工具内出现如下报错 出现异常: RangeError: Maximum call stack size exceeded 如图: 原因:很有可能

    2024年02月12日
    浏览(45)
  • uni-app6种跳转方式

    1、 uni.navigateTo:保留当前页面,跳转到应用内的某个页面。 2、uni.redirectTo:关闭当前页面,跳转到应用内的某个页面。 3、uni.reLaunch:关闭所有页面,打开到应用内的某个页面。 4、 uni.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 5、uni.navigateBack:关闭当前页

    2024年02月13日
    浏览(40)
  • Uni-app中使用uni.navigateTo跳转失败

    在初次使用navigateTo的时候,难免会出现一些小的问题,已经使用了但是频繁的跳转失败 ① 第一个问题就是没有在pages.json的文件中添加当前的/pages/Approval/rules这个路径 这是出现的第一个错误 ②还有可能的是即使添加了这个也会报错,这可能是因为路径的问题,在输入url的时

    2024年02月15日
    浏览(40)
  • uni-app uni.switchTab和uni.reLaunch跳转tabbar页面

    uni.switchTab: 跳转列表不会刷新 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 uni.reLaunch: 跳转列表会刷新 关闭所有页面,打开到应用内的某个页面。( 可以跳转到tabBar 页面 ) 但如果是列表的自定义表头有多个title的时候需要加参数才能返回到对应的列表 如下图所示

    2024年02月11日
    浏览(55)
  • uni-app小程序分享功能实现

    通过onShareAppMessage(OBJECT) 将小程序到分享微信聊天,onShareTimeline()将小程序分享到朋友圈。 api中的参数配置参考文档:https://uniapp.dcloud.net.cn/api/plugins/share.html#onshareappmessage 分为全局引入、单页面引两种方式 全局引入只需要在小程序main.js中引入一次,可以复用,便于维护; 单

    2024年02月05日
    浏览(102)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包