uniapp 微信小程序 锚点跳转

uniapp文档

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

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

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

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

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

相关推荐
Java Fans31 分钟前
微信小程序——访问服务器媒体文件的实现步骤
服务器·微信小程序·小程序
岑梓铭33 分钟前
uniapp邪门事件
uni-app
漫天绯羽2 小时前
uniapp 中使用天地图,安卓端、h5
uni-app
尚学教辅学习资料3 小时前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游
Evaporator Core3 小时前
微信小程序数据绑定与事件处理:打造动态交互体验
微信小程序·小程序·交互
烂蜻蜓8 小时前
前端已死?什么是前端
开发语言·前端·javascript·vue.js·uni-app
流烟默16 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序
家里有只小肥猫19 小时前
uniApp小程序保存canvas图片
前端·小程序·uni-app
低代码布道师19 小时前
性格测评小程序10生成报告
低代码·小程序
小徐_233319 小时前
从空白到交互:用Trae快速搭建uni-app AI对话小程序页面
前端·uni-app·trae