微信小程序设置锚点定位，wx.pageScrollTo

微信小程序中使用 wx.pageScrollTo({)}；进行页面锚点定位，一定要将根目录设置为滑动的根据。

也就是 page 要设置样式为 overflow-y: auto；指定他的高度。
在其中，设置一个容器 home 设置id。
在添加一个内容容器 container 设置类名。
设置多个锚点，添加锚点类型如： node0, node1, node2 等。
然后通过点击事件传递要跳转的锚点信息。

通过wx.createSelectorQuery().select(类名).boundingClientRect(res => {}),，获取锚点中的数据。
在通过wx.createSelectorQuery().select(“#home”).boundingClientRect(res => {}), 获取设置的跟锚点home。
在这里不能直接获取跟元素 page ，只能获取当前组件的根元素，也就是home。
在通过wx.pageScrollTo({ selector: “.container”, scrollTop: 滑动的距离 });就可以滑动到锚点。

看不懂的看代码, (通过 vue3.0 + ts + vite 创建的uni-app 项目)

page {width: 100%;height: 100vh;display: block;overflow-y: auto;  /* 重点 */overflow-x: hidden;box-sizing: border-box;
}

<view id="home"><view class="container"><!-- 内容 锚点点击事件 --><view v-for="(item, index) in data" :key="index" @click="jump(item, index)"></view><!-- 锚点 --><view class="node0"></view><view class="node1"></view><view class="node2"></view></view>
</view>

let data = ["1","2","3","4"],const jump = (row: any, index: number): void => {let className = String('.node' + index);uni.createSelectorQuery().select(className).boundingClientRect((con: any) => { // 获取点击要跳转的锚点信息uni.createSelectorQuery().select("#home").boundingClientRect((res: any) => { // 获取根元素要滑动的元素uni.pageScrollTo({selector: "#home",  // 滑动的元素// duration: 1500, //过渡时间scrollTop: con.top - res.top, //到达距离顶部的top值});}).exec();}).exec();
});

微信小程序设置锚点定位，wx.pageScrollTo相关推荐

微信小程序——日常踩坑（wx.pageScrollTo滚动时有抖动问题）
在小程序的开发过程中,有个功能是点击后需要往view层中添加数据内容,在添加后需要将内容滚动到最下面一条,以便有更好的用户体验. 开始是选择了使用wx.pageScrollTo接口,通过获取当前vie ...
微信小程序设置请求超时wx.request等，简单易懂！
微信小程序设置请求超时wx.request等一.用到的方法: 个人理解,比较粗糙看不懂可以百度一下具体用法 new Promise:new了一个函数或者方法,可以被Promise.race等方法调 ...
微信小程序：获取地理定位和显示相应的城市名称。
最近在看微信小程序,遇到地理定位显示城市名称的问题.本文就是记录这一过程. 解决方案 ...
api 定位微信小程序精度_聊聊微信小程序内置地图定位的精确性
前段时间,一个客户说到,我们给做的菜齐了小程序商家定位的地图不准确!用户想要去小程序指定的商家,从微信地图入口导航到所需要的地点差了有上百米! 上百米,这距离可够地远的,这怎么可能啊?我们一一查看 ...
微信小程序_map组件实现定位
微信小程序_map组件实现定位 map组件这是官方提供的地图组件,很多复杂的功能我暂时没有接触到,而且有的效果似乎只有企业可以使用.我在这里就简单的实现一下map组件的定位用户的位置的功能. 下面的 ...
开源一个基于微信小程序的蓝牙室内定位软件（附下载链接）
文章目录 1. 运行环境要求 2. 软件功能及程序说明 2.1 软件组成 2.2 主要功能 2.3 文件及函数功能说明 3. 软件设计及操作说明 4. 完整版代码获取 1. 运行环境要求软件运行环境 ...
微信小程序canvas大小、定位适配
微信小程序canvas大小.定位适配在微信小程序canvas开发中,遇到一种情况:在iPhone X调好的定位大小,把机型调整为iPhone 5,由于iPhone5屏幕较小,canvas画出的内容就 ...
微信小程序iBeacon获取问题（wx.onBeaconUpdate不执行）【已解决】
微信小程序iBeacon获取问题(wx.onBeaconUpdate不执行)[已解决] 问题描述软件硬件使用代码问题现象解决办法问题描述长话短说,使用某公司的iBeacon标签设备,开发微 ...
微信小程序实现锚点跳转
微信小程序实现锚点跳转 1.先上效果图,看看是不是你想要的. 2.主要用到的微信小程序的scroll-view 组件实现该效果.核心主要是使用scroll-into-view属性跳转对应的标签页和标签 ...

微信小程序设置锚点定位，wx.pageScrollTo

微信小程序设置锚点定位，wx.pageScrollTo相关推荐

最新文章

热门文章