微信小程序实现锚点跳转

微信小程序实现锚点跳转

1、先上效果图，看看是不是你想要的。

2、主要用到的微信小程序的scroll-view 组件实现该效果。核心主要是使用scroll-into-view属性跳转对应的标签页和标签内容区域和bindscroll事件监听标签内容区域距离页面顶部的距离来判断顶部的标签应该处于哪个标签。

3、wxml代码：

<!-- start 标签区域 -->
<view class="text" style="height:{
   {height}}px " >
  <!-- scroll-into-view 可以跳转到绑定值对应的ID的标签区域 -->
  <scroll-view class='scroll-x-view1' scroll-x='true' scroll-into-view='{
   {indexMaodian}}'>
  <view bindtap="toDetail"  data-id="a1" class='scroll-view-item1 bg_red' id="a"  >1标签</view>
  <view  bindtap="toDetail" data-id="b1" class='scroll-view-item1 bg_blue' id="b">2标签</view>
  <view  bindtap="toDetail" data-id="c1" class='scroll-view-item1 bg_green' id="c">3标签</view>
  <view  bindtap="toDetail" data-id="d1" class='scroll-view-item1 bg_yellow' id="d">4标签</view>
  <view  bindtap=