小程序滑动到固定位置

245 阅读1分钟

因为微信小程序没有dom概念,所以不能使用锚点,也不能直接获取对应字母相对页面的偏移位置。此时只能使用小程序创建对象实例的API获取节点信息:

btnMore() {
    var me = this;
    //创建节点查询器 query,.in(this),this传入的是自定义组件的实例,否则获取到的rect值为null
    var query = wx.createSelectorQuery().in(me);
    //获取页面滚动位置请求
    query.selectViewport().scrollOffset();
    //选择Id=describe
    query.select("#describe").boundingClientRect();
    query.exec(function (res) {
      // console.log()
      // res[0]//是page
      // res[1]//是#describe
      var miss = res[0].scrollTop + res[1].top - 80;
      wx.pageScrollTo({
        scrollTop: miss,
        duration: 300
      });
    });
  }

1.创建节点查询器 query,.in(this),this传入的是自定义组件的实例,否则获取到的rect值为null

2.调用select方法,传入节点的id值,可在同一节点对象进行多次调用,最后会返回数组结果(上图中滚动区域距离页面顶部是有两个导航栏高度的距离的,所以查询了两次导航栏);

  1. exec()回调方法中可以获取所查询所有节点的信息,数组第一条为页面的位置信息(滚动距离),获取到对应字母节点的top值为节点相对于屏幕顶部的位置

  2. 使用微信小程序自带的滚动方法:wx.pageScrollTo