微信小程序实现点击左侧导航栏自动定位到对应的位置

我要实现的效果是点击左侧导航栏，右侧区域会自动滚动到相应的位置显示，其中当选择品牌的时候，右侧是有索引栏的。效果图如下：

刚开始的时候我是用微信小程序自带的组件scroll-view是实现点击左侧导航栏的跳转功能，其中scroll-into-view就是用来跳转到指定的位置，scroll-into-view="{{index}}"的index是下面的view里面对应的id。

    <scroll-view scroll-y scroll-into-view="{{ index }}"  scroll-with-animation bindscroll="scroll"> 
      <view class="special" id="special">
        <view>特别选项</view>
      </view>
      <view class="brand" id="brand">
        <view>品牌</view>
        
      </view>
      <view class="type" id="type">

      </view>
      <view class="price" id="price"></view>
      <view class="mileage" id="mileage"></view>
      <view class="emissions" id="emissions"></view>
    </scroll-view>

然后右侧的字母索引这部分，我用到了vant的组件IndexBar 索引栏，这部分的实现代码如下

<van-index-bar highlight-color="#FFF" scroll-top="{{ scrollTop }}" index-list="{{ indexList }}" z-index="1000"> 
            <view wx:for="{{ customList }}" wx:key="index" class="indexBox">
              <van-index-anchor use-slot index="{{ item.firstLetter }}">
                <text>{{ item.firstLetter }}</text>
              </van-index-anchor>
              <van-cell clickable wx:for="{{item.list}}" wx:key="index" data-id="{{item.id}}" data-name="{{item.name}}" title="{{item.name}}" bindtap="gotoSelect" />
          </view>
          </van-index-bar>

highlight-color是指定了索引字符的高亮颜色 ，就是当你浏览的这个区域是什么索引的区域，这个字母就会显示为你指定的颜色；index-list就是你的索引列表，这个可以自定义，在js部分进行设置，页面上的索引列表就可以根据你设置的内容来显示了。

到这一步我发现了问题van-index-bar的索引效果出不来了，点击索引列表没有反应。

 查阅资料才发现：由于 <van-index-bar /> 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：view 使用 overflow: scroll; 或者 scroll-view，具体可查看微信小程序文档

所以当同时scroll-view和van-index-bar的时候就出问题了。于是我只能修改思路，去掉scroll-view，用wx.pageScrollTo(Object object)和van-index-bar。即在js里面用

wx.pageScrollTo({
      selector:`#${kind}`
})

来控制点击左侧导航栏，右侧自动滚动到指定的区域，上面代码里的kind是页面代码中view的id，这里要注意kind前一定要带#，否则识别不出来。

这个时候基本功能都实现了，但是还有点问题，就是当你滑动右侧的界面到下面的时候，左侧的导航栏会不见，为了提高使用感，我们需要将左侧的导航栏弄成悬浮的。只需要在左侧的导航栏的样式里面加上position: fixed;就可以悬浮了，再加上height: 100%;左侧导航栏的背景颜色就能够全屏展示。