微信小程序的顶部导航，点击滑动到页面对应区域

问题：制作微信小程序的头部导航，点击导航就滑动到相应的标记区，随着页面的滑动，自动切换高亮显示所做导航。

方案：

1. 点击导航滑动到标记点
2. 计算屏幕所在导航区域
3. 注意事项

1. 点击导航滑动到标记点

页面最顶端节点(放在页面最前面),用于计算页面离屏幕的高度

<view id='top'></view>

导航节点

<view class="tab" style="opacity: {
   {
   -scrollTop/200}}" id='tab'>
    <view wx:for='{
   {
   tab}}' 
      wx:key='index'
      class="tab-item {
   {
   currentTab==index?'active':''}}"
      data-current="{
   {
   index}}"
      bindtap="tabChange">
      {
   {
   item}}
    </view>
</view>

导航数据：

tab: ['商品','店铺','评价','详情']

导航样式：

.tab {
   
    position: fixed;
    top: 0;
    z-index: 9;
    width: calc(100% - 160rpx);
    padding: 0 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    opacity: 0;
}
.t