微信小程序点击滚动到指定位置的实现
公司项目要做一个类似微信通讯录导航的效果,点击右侧字母页面滚动到相应位置。
因为微信小程序没有dom概念,所以不能使用锚点,也不能直接获取对应字母相对页面的偏移位置。此时只能使用小程序创建对象实例的API获取节点信息:
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页面滚动
如果是让滚动容器滚动到指定位置,计算位置会有一点不同:
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属性就行了。
到此这篇关于微信小程序点击滚动到指定位置的实现的文章就介绍到这了,更多相关小程序点击滚动到指定位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
element-table表格中插入颜色块显示数据状态的示例代码
这篇文章主要介绍了element-table表格中插入颜色块显示数据状态,代码部分分为dom部分和data部分及css部分,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12Bootstrap优化站点资源、响应式图片、传送带使用详解3
这篇文章主要介绍了Bootstrap优化站点资源、完成响应式图片、让传送带支持手势的相关知识,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-10-10javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
这篇文章主要介绍了javaScript生成二维码,改造jquery.qrcode.js,使之支持中文,能带logo的二维码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-01-01
最新评论