微信小程序实现页内顶部导航栏

要在微信小程序中实现页内顶部导航栏，可以使用 `scroll-view` 和 `wx.createSelectorQuery()` API。

首先，在 `scroll-view` 中设置 `scroll-y="true"`，即可创建一个可滚动的区域。然后，在 `scroll-view` 中添加一个 `view` 元素，用于存放导航栏。在导航栏中添加若干个 `text` 元素，即可实现导航栏的布局。

接下来，使用 `wx.createSelectorQuery()` API 获取 `scroll-view` 和导航栏中的 `text` 元素的信息。在获取到元素信息后，可以计算出导航栏中每个 `text` 元素在 `scroll-view` 中的位置。然后，通过监听 `scroll-view` 的滚动事件，计算出当前滚动位置，从而更新导航栏中 `text` 元素的样式。

最后，添加导航栏的点击事件，使得点击导航栏中的某个 `text` 元素时，能够滚动到相应的位置。具体实现可以使用 `scroll-view` 的 `scroll-into-view` 属性或者 `scroll-top` 属性。

以下是一个简单的示例代码：

<scroll-view scroll-y="true" bindscroll="onScroll">
  <view class="nav">
    <text wx:for="{{navList}}" wx:key="{{item}}" class="{{activeIndex==index?'active':''}}" data-scroll="{{item.id}}" bindtap="onNavTap">{{item.title}}</text>
  </view>
  <view class="content">
    <!-- 页面内容 -->
  </view>
</scroll-view>

<script>
Page({
  data: {
    navList: [ // 导航栏数据
      { id: 'a', title: '导航1' },
      { id: 'b', title: '导航2' },
      { id: 'c', title: '导航3' },
      { id: 'd', title: '导航4' },
      { id: 'e', title: '导航5' }
    ],
    navHeight: 0, // 导航栏高度
    navTop: [], // 导航栏各个元素的顶部位置
    activeIndex: 0 // 当前选中的导航栏元素下标
  },
  onLoad() {
    // 获取导航栏高度和各个元素的顶部位置
    wx.createSelectorQuery().in(this).select('.nav').boundingClientRect((rect) => {
      this.setData({
        navHeight: rect.height
      })
    }).exec()
    wx.createSelectorQuery().in(this).selectAll('.nav text').boundingClientRect((rects) => {
      let topArr = []
      rects.forEach(rect => {
        topArr.push(rect.top)
      })
      this.setData({
        navTop: topArr
      })
    }).exec()
  },
  onScroll(e) {
    let scrollTop = e.detail.scrollTop + this.data.navHeight
    let navTop = this.data.navTop
    let index = 0
    for (let i = 0, len = navTop.length; i < len; i++) {
      if (scrollTop >= navTop[i]) {
        index = i
      } else {
        break
      }
    }
    this.setData({
      activeIndex: index
    })
  },
  onNavTap(e) {
    let id = e.currentTarget.dataset.scroll
    this.setData({
      activeIndex: e.currentTarget.dataset.index
    })
    wx.pageScrollTo({
      scrollTop: wx.createSelectorQuery().select('#' + id).boundingClientRect().exec((rect) => {
        return rect[0].top
      })
    })
  }
})
</script>

<style>
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1rpx solid #eee;
}
.nav text {
  font-size: 28rpx;
  color: #999;
}
.nav text.active {
  color: #333;
}
.content {
  margin-top: 50rpx;
}
</style>