Small micro-channel program click on the scroll to the specified location

 

Company to do a project similar to the effect of micro-channel contacts navigation, click on the right letters page scroll to the appropriate location.

 

Because the applet no dom micro-channel concept, the anchor can not be used, can not obtain a corresponding page offset position relative to the letter directly. In this case only use a small program to create an object instance API to get node information:

 

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
    });
});

Explain the meaning of the code:

1. create node objects,wx.createSelectorQuery()返回一个对象实例；

2. Select the display area;

3. Call the select method, passing in the id value of the node, it can be called multiple times in the same node object, and finally returns an array of results (from the top of the page image above the scroll area is a distance of two navigation bar height, so the query two navigation bar);

4.exec () callback method can obtain information about all the nodes in the query, the first array location information page (scrolling distance), the value of the acquired top node corresponding to the node with respect to the letter position of the top of the screen

Results: page scroll position = + page scroll from screen height relative distance letter node - the head Navigation bar height - the height of the menu bar

wx.pageScrollTo () API calls to scroll the page

If the container is to scroll to scroll to the specified location, calculate the position will be a little different:

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属性就行了。