uniapp 微信小程序 锚点跳转

uniapp文档

以下是我遇到的业务场景,是点击商品分类的某一类 然后页面滚动至目标分类,

首先第一步是设置锚点跳转的目的地,在目标的dom上面添加id属性

然后给每个分类每一项添加点击事件,分类这里的item数据里面有一字段是和上面商品dom设置的id值是一一对应的

下面是点击事件,我发现有两种方式可以实现锚点跳转,一个是直接通过给api配置selector参数就可以跳转至id元素处,另一个是先获取dom的top值,然后通过给api配置scrollTop值来实现页面滚动。

除了上面方式,其实还可以使用scroll-view,因为上面已经满足我的业务需求,故就不在此过多赘述,有兴趣的同僚可以试试scroll-view的实现方式。

相关推荐
疯狂的沙粒4 小时前
uniapp 开发企业微信小程序,如何区别生产环境和测试环境?来处理不同的服务请求
微信小程序·uni-app·notepad++
轩1154 小时前
实现购物车微信小程序
微信小程序·小程序·notepad++
知兀5 小时前
【黑马程序员uniapp】项目配置、请求函数封装
uni-app
fakaifa9 小时前
【最新版】西陆洗车系统源码全开源+uniapp前端+搭建教程
java·小程序·uni-app·php·源码下载·西陆洗车·洗车小程序
m0_7263658310 小时前
2025年微信小程序开发:趋势、最佳实践与AI整合
人工智能·微信小程序·notepad++
gurenchang12 小时前
动态设置微信小程序页面标题(navigationBarTitleText属性)
微信小程序·小程序
anyup12 小时前
记一次解决 uni-app 真机运行时导致的白屏问题:Trae vs 通义灵码 vs Cursor
前端·uni-app·trae
Emma歌小白13 小时前
ReferenceError: wx is not defined
微信小程序
getapi13 小时前
为什么 uni-app 开发的 App 没有明显出现屏幕适配问题Flutter 开发的 App 出现了屏幕适配问题
flutter·uni-app
老李不敲代码16 小时前
榕壹云健身预约系统:多门店管理的数字化解决方案(ThinkPHP+MySQL+UniApp实现)
mysql·微信小程序·uni-app·php·软件需求