微信小程序中经常用到导航栏的使用，多用于分类页面，接下来做的小demo，是可以自适应分类的数目以及title长度的一个展示，并与页面进行联动的效果。
先来几张效果图：

image.png

image.png

image.png

在这里，有两点需要总结一下：

image.png

image.png

2.是关于节点选择器的使用

      var query = wx.createSelectorQuery();
      var idString = '#view' + I
      query.select(idString).boundingClientRect()
      query.exec((res) => {
        boundsArray.push(res[0])
      })

举个例子：

      var query = wx.createSelectorQuery();
      query.select('.content').boundingClientRect()
      query.exec((res) => {
        console.log(res)
      })

这里是获取class='content'的view的相关信息，包括

image.png

当然，这里还可以获取id='content'的view，只需要修改一句

      query.select('#content').boundingClientRect()

然后关于联动的话，就很简单了，可以看我具体代码。

如果觉得有用的话，请点个赞赞再走哈！