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


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 相关文章推荐
浅谈javascript中的作用域
Apr 07 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
Vue三层嵌套路由的示例代码
May 05 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
vue3中的组件间通信
Mar 31 Vue.js
使用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带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
php中stream(流)的用法
2014/03/25 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
Python中使用item()方法遍历字典的例子
2014/08/26 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
Django中的forms组件实例详解
2018/11/08 Python
Python魔法方法详解
2019/02/13 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
关于Keras Dense层整理
2020/05/21 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
Django nginx配置实现过程详解
2020/09/10 Python
PHP如何对用户密码进行加密
2014/07/31 面试题
PHP中如何创建和修改数组
2012/05/02 面试题
爱岗敬业演讲稿范文
2014/01/14 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书