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


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 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
JavaScript中的几种继承方法示例
Dec 06 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
Zend公司全球首推PHP认证
2006/10/09 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
Javascript缓存API
2016/06/14 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python django 实现验证码的功能实例代码
2017/05/18 Python
python语言中with as的用法使用详解
2018/02/23 Python
浅析python的优势和不足之处
2018/11/20 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
房屋授权委托书范本
2014/10/07 职场文书
圣诞节开幕词
2015/01/29 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android