小程序 模拟今日头条导航栏，点击锚点跳转对应楼层

使用场景，顶部导航的个数不确定，会有超出屏幕的情况，在一行展示，每点击一个导航的tab会判断是否向左或者像右滚动一个距离，以使当前的点击的导航能看到。同时点击导航会锚点跳转对应楼层，当前导航会变为激活状态。滚动屏幕，滚动到对应楼层，对应导航变为激活状态。

1.代码实现

1.1wxml

<!-- 楼盘相册 -->
<scroll-view class='xcnyTab' scroll-x scroll-left="{
  {tabScroll}}" scroll-with-animation="true">
  <view wx:for='{
  {xcnyHead}}' class='xcnyTabLi {
  {currentTab == index ? "on" : ""}}' data-current="{
  {index}}" bindtap='clickMenu'>
    {
  {item}}
    <view class='xcnyTabLi-line'></view>
  </view>
</scroll-view>
<!-- 所有种类 -->
<scroll-view scroll-y style='height:{
  {ht}}px;' scroll-with-animation="true" bindscroll="scrollRight" scroll-into-view="{
  {toViewRt}}">
  <view class='xcnyAll'>
    <!-- vr -->
    <!-- a_type (vr: 11) (视频: 12)  (其他图片) -->
    <block wx:for="{
  {xcnyList}}" wx:for-item="list" wx:for-index="listidx">
      <view class='xcnyAll-title' id='t{
  {listidx}}'>{
  {list.a_name}}</view>
      <view class='xcnyAllList {
  {list.flag==1?"":"h523hidden"}}'>
        <view class='xcnyAllList-wrap clearfix'>
          <block>
            <view class='xcnyAllLi' wx:for="{
  {list.a_photos}}" data-listidx="{
  {listidx}}" data-index="{
  {index}}" bindtap='godetail'>
              <image class='xcnyAllLi-img' src='{
  {item.p_thumb}}'></image>
              <!-- vr:11 -->
              <view wx:if="{
  {list.a_type==11}}" class='xcnyAllLi-vr'></view>
              <!-- 视频: 12 -->
              <view wx:if="{
  {list.a_type==12}}" class='xcnyAllLi-video'></view>
            </view>
          </block>
          <block wx:if="{
  {12<list.a_photos.length}}">
            <view class='xcnyAllLi-more' data-listidx="{
  {listidx}}" wx:if="{
  {!list.flag}}" bindtap='getmore'></view>
          </block>
        </view>
      </view>
    </block>
  </view>
</scroll-view>

1.2wxss

.xcnyTab{
  width: 100%;
  white-space: nowrap;
  border-top: 1rpx solid #f1f1f1;
  border-bottom: 1rpx solid #f1f1f1;
}

.xcnyTabLi{
  height: 80rpx;
  display: inline-block;
  width: 18.18%;
  text-align: center;
  position: relative;
  font-size: 28rpx;
  color: #404040;
  line-height: 80rpx;
  
}

.xcnyTabLi.on{
  color: #ff7500;
}

.xcnyTabLi.on .xcnyTabLi-line{
  width: 36rpx;
  height: 5rpx;
  background-color: #ff7500;
  position: absolute;
  left: 50%;
  margin-left: -18rpx;
  top:60rpx;
}

/* 所有种类 */
.xcnyAll{
  width: 716rpx;
  margin: 0 auto;
}

.xcnyAll-title{
  font-size: 32rpx;
  color: #8a8a8a;
  line-height: 34rpx;
  padding-top: 40rpx;
}

.xcnyAllList{
  width: 100%;
  overflow: hidden;
  margin-top: 25rpx;
  position: relative;
}

.xcnyAllList.h523hidden{
  max-height: 523rpx;
  overflow: hidden;
}


.xcnyAllList-wrap{
  width: 716rpx;
}

.xcnyAllLi-more{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAXCAYAAADa+mvTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUzMTQzOTA3QzdEMzExRTlCRjA4QjNCNjc1NDI2QzRFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUzMTQzOTA4QzdEMzExRTlCRjA4QjNCNjc1NDI2QzRFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTMxNDM5MDVDN0QzMTFFOUJGMDhCM0I2NzU0MjZDNEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTMxNDM5MDZDN0QzMTFFOUJGMDhCM0I2NzU0MjZDNEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Hl6ueAAAEoElEQVR42sRajZGqMBDGGRvIK4EWeCVgCVwJWAKWACVICViClCAlSAlSgi/xfbnZ20tCAhEzs+MdQnazu9/+YZJ4rufzmUu6SaqSDZfkJ8C73Jq3p3yalJxnSRm5tjntA2QXkjJJ/VLDyI/ccUvG/haglO3T73a7gV07s+fXrkHyOAbq5kpkOH7KwfZQiFJaOXOvVqzywNpDIRfD852vQsmn2meSNCpnkvtOFmfIPqTDCiQgp6LacqbLu4XZwaBFgLJ9ViMVfzKgtLDcPwK9ShEH+Wy/MAK4Vo4zfs1FGYvTcH4VQJD66kTSaROE4oBflnsKUIsD9EDDgGsuhFEFpDPoL+HdwmF4tSaTwbURPAy7yJAqN8Ip9Kfmc4GhJkso7nC+doFImUmXa4qRTtJDeaNS8vP/qpH4H/heeO5XP+Osm4PHbaO9b9BJOlOknHF/tbDIUXyuIc/vLUgqCWJUCBwoavD/Ad53l38r72vl9dFh09bhbWfw8glJk2d4M0WBAogaLbnQtY5AZo/za/SpzwOTS3+X49zNQlxdIFcOe7SgyQdBJRD3JEgUNP/p6wzFFHnq+dKBeBPVxIuFL82gSJjyN74rLLI5EWrLowSxAiipEL20Dte2IgJ73rHnw9Ue6YM+mFEyh0JqU34h4VkzLSKGQtMSLoMa6Nuglu+DDcqMeiVKv4NP7D6zAh9qqx98dJXbkbK6IAnfFLJ6S+icSOGUy7B0YBWhsOw3LSkYLFX0bWX7otqtvx7VdEb68pzwnFiILb1DZNgqCOmitn91FxGVMqsMphTdiM+2Eb7tBJF9aQ51ngHRqTI4slZoaxg0tG8cNGSk3lHryzUp+hOw8SOwX6RTlS7gWV+nabjxkQJeBuVDD8jkM1ZsWO88GKIVHTRcYOjC0NaNK42ZMpSq/aZ9hAZbBBgkI31Z4kBLsqAKnZMrWyKzQR8nPsslyuWDhsJgzLVDhgy6KNgEqqGDBdO6QthYfW2JSZCAEJkJLQ7jVJEiRhfhLHouneIzJ7nMdZ6SjAiX5M2S8Wo5v32ywcLwXPe1Ryji5WmR36BcHPm4AN9mTY+rKliGwpEo