微信小程序点击滚动到指定位置的实现


Posted in Javascript onMay 22, 2020

公司项目要做一个类似微信通讯录导航的效果,点击右侧字母页面滚动到相应位置。

微信小程序点击滚动到指定位置的实现

因为微信小程序没有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属性就行了。

到此这篇关于微信小程序点击滚动到指定位置的实现的文章就介绍到这了,更多相关小程序点击滚动到指定位置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
使用JavaScript通过前端发送电子邮件
May 22 #Javascript
uni-app微信小程序登录授权的实现
May 22 #Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
uni-app使用微信小程序云函数的步骤示例
May 22 #Javascript
AutoJs实现刷宝短视频的思路详解
May 22 #Javascript
jquery更改元素属性attr()方法操作示例
May 22 #jQuery
You might like
一个PHP的QRcode类与大家分享
2011/11/13 PHP
php实现单链表的实例代码
2013/03/22 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
actionscript与javascript的区别
2011/05/25 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
JSONObject使用方法详解
2015/12/17 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
pycharm 安装JPype的教程
2019/08/08 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
python单例设计模式实现解析
2020/01/07 Python
python标准库os库的函数介绍
2020/02/12 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
最新党员思想汇报
2014/01/01 职场文书
会计辞职信范文
2014/01/15 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
秸秆管理实施方案
2014/03/15 职场文书
班主任个人工作反思
2014/04/28 职场文书
校园文明倡议书
2014/05/16 职场文书
求职信标题怎么写
2014/05/26 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
《打电话》教学反思
2016/02/22 职场文书