小程序 类似锚点跳转，滚动

小程序 类似锚点跳转的做法，

这样的做法，只适合导航条放在最顶部，或者固定在左右两边；
前阵子，老大要把这个需求放在大概屏幕三分之二的位置，上面是产品图片，价格和介绍；
做出来后，电脑上没啥问题，（其实有），只是不明显，在手机上调试的时候，怪乖的，一会整个页面在滚动，一会只有导航条下面在滚动，很不好，后来就改成了tabber切换的效果
下面直接上：
网上有很多头部导航是通过数组遍历的
但是我们的导航有时候很简单两个或者三个的时候，调用data的数据渲染有点麻烦，直接写死，比较简洁
可以切换也可以上下滚动，导航栏会固定不动

xhtml：

<view class="navigate">
  <view bindtap="scrollTap" data-hash="one" class="tip {{to_Id=='one' ? 'checked_tip':''}}">
    商品详情</view>
  <view bindtap="scrollTap" data-hash="two" class="tip {{to_Id=='two' ? 'checked_tip':''}}">
    评价</view>
  <view bindtap="scrollTap" data-hash="three" class="tip {{to_Id=='three' ? 'checked_tip':''}}">
    关于我们</view>
</view>
<scroll-view style="height:{{winHeight}}" scroll-into-view="{{to_Id}}" scroll-y="true">
  <view id="one">
    <view>商品详情 </view>
    <view> 商品详情 </view>
   
    <view> 商品详情 11</view>
    <view> 商品详情1111111111111111 </view>
     <!-- ....篇幅所限，太多不好展示，自己多复制一下，去测试就知道了.............. -->
  </view>
  <view id="two">
    <view>商品评价22</view>
    <view>商品评价22</view>
    <view>商品评价22</view>
    <view>商品评价22</view>
 <!-- .....篇幅所限，太多不好展示，自己多复制一下，去测试就知道了.... -->
    <view>商品评价</view>
    <view>商品评价</view>
    <view>商品评价22222222222222</view>
  </view>
  <view id="three">
    <view>关于我们333</view>
    <view>关于我们333</view>
    <view>关于我们333333</view>
 <!-- ........篇幅所限，太多不好展示，自己多复制一下，去测试就知道了..... -->
  </view>
</scroll-view>

js

Page({
  data: {
    winHeight: '100%',
    to_Id: 'one', //锚点跳转的ID
  },
  onLoad() {
    let that = this;
    wx.getSystemInfo({
      success: function(res) {
        console.log(res)
        //屏幕的宽度/屏幕的高度 = 微信固定宽度(750)/微信高度
        that.setData({
          // 80是上面导航条的高度
          winHeight: res.windowHeight - (res.windowWidth * 80 / 750) + 'px'
        })
      }
    });
  },
  scrollTap: function(e) {
    this.setData({
      to_Id: e.target.dataset.hash
    })
  }
})

层叠样式wxss:

page {
  height: 100%; 
  /* //类似于 pc端里面的html body height: 100%； */
}
.navigate {
  background: #fff;
  height: 80rpx;
  display: flex;
  justify-content: space-around;
}

.tip {
  font-size: 27rpx;
  width: 33.33%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
   background: #666;
  color: #f5f5f5;
  border-top: 1px solid #666;
}
/* 点击的添加class上的css样式 */
.checked_tip {
  background: rgb(223, 223, 223);
  color: #201d1d;
}