当前位置: 首页 > article >正文

微信小程序-实现锚点跳转,页面加载后自动跳转、点击跳转到指定位置

一、页面加载后滚动到指定位置,onLoad或onReady里执行。

scrollAfterLoading() {
    const query = wx.createSelectorQuery()
    query.select('#cont1').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
        wx.pageScrollTo({
            scrollTop: res[0].top
        })
    })
}

二、点击事件,跳转到指定ID位置,需要位置bind:tap就可以了。

scrollToAnchor: function () {
    const query = wx.createSelectorQuery()
    query.select('#cont2').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
        wx.pageScrollTo({
            scrollTop: res[0].top + res[1].scrollTop
        })
    })
}

三、完整代码下载链接
https://download.csdn.net/download/weixin_43951315/90477341


http://www.kler.cn/a/584780.html

相关文章:

  • vue判断视频链接是否有效
  • windows平台的ffmpeg编译使用
  • 5.1 程序调试
  • Qt-开发设置窗体透明效果
  • Gitlab报错:sudo: a password is required
  • 【模拟CMOS集成电路设计】带隙基准(Bandgap)设计与仿真(基于运放的电流模BGR)
  • autoreconf --install的作用
  • 复试难度解析,西电先进材料与纳米科技学院学院考研录取情况
  • c++ 中的float和double 的区别 开发过程中使用哪个更好
  • 《阿里云Data+AI:开启数据智能新时代》电子书上线啦!
  • 每日一题力扣2697.字典序最小回文串c++
  • 生成式AI+安全:API防护的“进化革命”——从被动防御到智能对抗的技术跃迁
  • 【openGauss】物理备份恢复
  • Nginx的流式响应配置详解
  • 使用服务器搭建开源建站工具Halo 2.0
  • 版本控制案例 | 硬盘巨头希捷(Seagate)的版本管理升级之路:从SVN到Perforce Helix Core
  • Word 小黑第19套
  • 基于Java + Redis + RocketMQ的库存秒杀系统设计与实现
  • Linux网络套接字编程——UDP服务器
  • 江科大51单片机笔记【17】红外遥控(外部中断)