微信小程序点击滚动到指定位置的实现
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
公司项目要做一个类似微信通讯录导航的效果,点击右侧字母页面滚动到相应位置。
因为微信小程序没有dom概念,所以不能使用锚点,也不能直接获取对应字母相对页面的偏移位置。此时只能使用小程序创建对象实例的API获取节点信息:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | let query = wx.createSelectorQuery(). in ( this ); query.selectViewport().scrollOffset() query.select( "#Nav" ).boundingClientRect(); query.select( "#FilterNav" ).boundingClientRect(); query.select( "#" +((letter== '#' )? 'other' :letter)).boundingClientRect(); query.exec( function (res) { let scrollTop = 0; if (res[3]){ scrollTop = res[0].scrollTop + res[3].top } else { scrollTop = res[0].scrollTop; } wx.pageScrollTo({ scrollTop: scrollTop - res[1].height - res[2].height, duration: 300 }); }); |
解释一下该代码的意思:
1.先创建节点对象,wx.createSelectorQuery()返回一个对象实例;
2.选择显示区域;
3.调用select方法,传入节点的id值,可在同一节点对象进行多次调用,最后会返回数组结果(上图中滚动区域距离页面顶部是有两个导航栏高度的距离的,所以查询了两次导航栏);
4.exec()回调方法中可以获取所查询所有节点的信息,数组第一条为页面的位置信息(滚动距离),获取到对应字母节点的top值为节点相对于屏幕顶部的位置
结果:页面滚动位置 = 页面滚动距离 + 字母节点相对屏幕高度距离 - 头部导航条高度 - 菜单栏高度
wx.pageScrollTo()调用API页面滚动
如果是让滚动容器滚动到指定位置,计算位置会有一点不同:
1 2 3 4 5 6 7 8 9 | var query = wx.createSelectorQuery(). in ( this ); query.select( "#swiper" ).boundingClientRect(); query.select( "#" + letter).fields({ rect: true ,scrollOffset: true }); query.selectViewport().scrollOffset() query.exec((res)=>{ _this.setData({ letterScrolltop: res[1].top - res[0].top }) }); |
上图因为是弹出框里的内容,所以列表放在scroll-view滚动容器中,和上面不一样的是滚动位置是:滚动容器距离页面顶部距离 - 锚点距离页面顶部距离,将计算后的偏移量修改至对应scroll-view容器的scroll-top属性就行了。
到此这篇关于微信小程序点击滚动到指定位置的实现的文章就介绍到这了,更多相关小程序点击滚动到指定位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
ff chrome和ie下全局动态定位的异同及全局高度的取法
这篇文章主要介绍了ff chrome和ie下全局动态定位的异同及全局高度的取法,需要的朋友可以参考下2014-06-06IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
checked属性在IE下不能正确实现的问题2009-07-07用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面,需要的朋友可以参考下。2011-05-05
最新评论