微信小程序 使用vant-weapp中的索引栏右侧点不动，滚定索引失效问题

微信小程序 使用vant-weapp中的索引栏右侧点不动，滚定索引失效问题

vant的索引栏只要使用了定位，或者自定义头部，那么vant的索引栏就会出现各种BUG，基本不能用，这里我是基本重新写了一个。

先看一下最终效果图：

以上就是最终效果图，我尝试了各种方法都没办法在原生的基础上解决问题，所以这里我采用的方法是放弃vant自带的索引，全部用自己的思路重新来做一个类似的功能。

wxml

<view id='app'>
  <navbar pageName="管理系统" textShow='{{!!hasUserInfo}}' hsText='{{toView}}' iconShow="{{true}}" iconName="search">
  </navbar>
  <scroll-view style='height:calc(100vh - {{navHeight}}px)' scroll-y bindscroll='onPageScroll' enhanced="true"
    scroll-into-view="{{toViewClick}}">
      <view class="contain">
        <!-- 这里index-list=[] 是为了清空vant自带的右侧索引栏-->
        <van-index-bar highlight-color='#FF8B00' index-list="{{[]}}">
          <view wx:for="{{ customerData }}" wx:key="index">
            <van-index-anchor index="{{item.letter}}" bindtap="letterClick" data-index='{{index}}'
              id="section-{{index}}" />
            <van-cell wx:for="{{ item.customerList }}" wx:for-item="im" title="{{ im.name }}" />
          </view>
        </van-index-bar>
        <!-- 自定义右侧索引栏-->
        <view class="index-bar">
          <text wx:for="{{indexList}}" class="index-bar-text {{item==toView ? 'letter-active':''}}" wx:key="index"
            bindtap="letterClick" data-index='{{index}}'>{{item}}</text>
        </view>
      </view>
  </scroll-view>
</view>

bindscroll为scroll-view自带的绑定滚动事件。scroll-into-view为跳转到指定ID所在的DOM处。

js

  data: {
    navHeight: app.globalData.navHeight,  // 这个为顶部nav的高度
    scrollTop: 0,
    isNow: '早上好',
    toView: 'A',
    toViewClick: 'section-0',
    hellowShow: false,
    hasUserInfo: false,
    userInfo: null,
    mainList: [],
    value: '',
    indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
    customerData: [{
      letter: 'A',
      customerList: [{
          'name': 'A客户'
        }
      ]
    }, {
      letter: 'B',
      customerList: [{
          'name': 'B客户'
        }
      ]
    }, {
      letter: 'C',
      customerList: [{
          'name': 'C客户'
        }
      ]
    }]
  },
 // 下滑触发
  onPageScroll(event) {
    console.log(event);
    let that = this;
    // 初始化获取每一个indexBar的 top 和 bottom
    this.getMainItemHandler();
    // 当前高度为 所滑动top + 距顶部距离
    let nowTop = event.detail.scrollTop + this.data.navHeight;
    this.data.mainList.forEach((item, index) => {
      // 判断区间List是否完全取出
      if (that.data.mainList[index + 1]) {
        if (nowTop >= item.top & nowTop < that.data.mainList[index + 1].top) {
          that.setData({
            toView: that.data.customerData[index].letter
          })
          return
        }
      } else {
        if (nowTop >= item.top) {
          that.setData({
            toView: that.data.customerData[index].letter
          })
          return
        }
      }
    })
  },
  // 初始化获取每一个index-bar的位置
  getMainItemHandler() {
    var that = this
    // 只在初次滚动的时候计算每个节点的位置
    if (!this.isFirstScroll) {
      let mainList = [];
      this.data.customerData.forEach((item) => {
        mainList.push({});
      })
      mainList.forEach((item, index) => {
      // 添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery
        wx.createSelectorQuery()
          .select(`#section-${index}`)
          .boundingClientRect(function (rect) {
            mainList[index].top = rect.top
            mainList[index].bottom = rect.bottom
          })
          .exec()
      })
      this.isFirstScroll = true  // 确保该方法在下滑的时候触发且只触发一次
      this.setData({
        mainList: mainList
      })
    }
  },

  // 索引栏字母点击
  letterClick(e) {
    this.setData({
      toViewClick: 'section-' + e.currentTarget.dataset.index
    })
  },

wx.createSelectorQuery().select('.className').boundingClientRect(()=>{})方法为小程序自带的查询节点所在DOM的方法。这里的思路就是在开始滑动的时候就先计算出每一个 index-bar在当前文件中所处的位置并存进miniList中，滑动过程中不停的拿当前的scrollTop于其作对比，从而判断出当前所处的区间。

WXSS（还是放上来吧）

.index-bar-text{
  font-size: 13px;
  margin: 0 auto;
  text-align: center;
  display: block;
  width: 20px;
}

.index-bar{
  position: fixed;
  top: 25%;
  right: 7px;
}

.letter-active{
  color: #FF8B00;
}