小程序实现索引栏遇到的坑

最近在做小程序项目的时候遇到了索引栏功能的东西，该项目是选择车型的需求。先看效果图：



实现上面的功能大概有自定义弹框、点击索引字母跳转到对应的位置、搜索关键字高亮等。下面一个个来实现。

特别说明：刚开始看到这种索引栏组件，就想到了使用vant的indexBar组件，但是后面使用popup组件indexBar共用的时候，点击索引字母是失效的，原因是因为popup的弹出层需要定位导致跳转对应的字母位置失效，很坑！！

css代码

<!-- 蒙层 -->
        <view class="remark" wx:if="{{showBrand}}" bindtap="closeBrand" catchtouchmove="preventTouchMove"></view>
        <!-- 内容 -->
        <view class="re-con" wx:if="{{showBrand}}">
          <view class="cityBox" wx:if="carBrandList">
            <view class="search-city">
              <view class="search-con">
                <icon class="iconfont icon-fangdajing" bindtap="searchKey"></icon>
                <input placeholder="请输入车型搜索" type="text" value="{{searchValue}}" bindinput="getCity"/>
              </view>
            </view>
            <view class="content">
              <view class="all-city">
                <scroll-view class="city-scroll {{isFirstId?'':'city-scoll-height'}}" scroll-y="true" scroll-with-animation="true" scroll-into-view="{{toView}}">
                  <view class="city-list" wx:if="{{!searchList.length}}">
                    <!-- 循环城市列表 start -->
                    <view wx:for="{{carBrandList}}" wx:key="index" id="{{'city'+index}}" catchtap='selectcity' data-initial="{{item.initial}}" class="listGroup">
                      <!-- 字母导航 -->
                      <view class="nav-text">
                        <text class="{{index==currentInitial?'currentClass':''}}">{{item.initial}}</text>
                      </view>
                      <!-- 汽车一级品牌名字 -->
                      <view class="show-city">
                        <radio-group class="radio-group" bindchange="radioChange" wx:if="{{!isFirstId}}">
                          <view class="city-item" wx:for="{{item.carBrandInfoList}}" wx:key="index" data-name="{{item.name}}" data-vendorid="{{item.parentId}}" data-obj="{{item}}" bindtap="clickFirstId">
                            <label for="{{item.carModelId}}">
                              <image src="{{item.logo}}"></image>
                              <text class="text">{{item.name}}</text>
                            </label>
                            <radio class="radio" id="{{item.carModelId}}" hidden="{{car.carModelId!=item.recordId}}" value="{{item.name}}" checked="{{car.carModelId==item.recordId}}" color="#28b8ff"></radio>
                          </view>
                        </radio-group>
                        <block wx:else>
                          <view class="city-item" wx:for="{{item.carBrandInfoList}}" wx:key="index" data-name="{{item.name}}" data-obj="{{item}}" bindtap="clickFirstId">
                            <image src="{{item.logo}}"></image>
                            <text>{{item.name}}</text>
                          </view>
                        </block>
                      </view>
                    </view>
                    <!-- 循环城市列表 end -->
                  </view>
                  <!-- 关键词搜索的列表 -->
                  <view class="city-list" wx:if="{{searchList.length}}">
                    <view wx:for="{{searchList}}" wx:key="index" id="{{'city'+index}}" catchtap='selectcity' data-initial="{{item.initial}}">
                      <view class="show-city">
                        <radio-group class="radio-group" bindchange="radioChange">
                          <view class="city-item" data-name="{{item.fullName}}" data-vendorid="{{item.vendorId}}" data-obj="{{item}}" bindtap="clickFirstId">
                            <label for="{{item.recordId}}">
                              <!-- <text >{{item.fullName}}</text> -->
                              <text wx:for="{{item.fullName}}" wx:key="index" class="{{item ==  searchValue? 'currentClass' : '' }}">{{item}}</text>
                            </label>
                            <radio class="radio" id="{{item.recordId}}" hidden="{{car.carModelId!=item.recordId}}" value="{{item.fullName}}" checked="{{car.carModelId==item.recordId}}" color="#28b8ff"></radio>
                          </view>
                        </radio-group>
                      </view>
                    </view>
                  </view>
                </scroll-view>
              </view>
              <!-- 字母索引 start -->
              <view class="search-nav" wx:if="{{isFirstId&&!searchList.length}}">
                <text bindtap="cityScroll" data-initial="{{item.initial}}" data-index="{{index}}" wx:for="{{carBrandList}}" wx:key="index" class="navlist {{index==currentInitial?'currentClass':''}}" catchtouchmove="preventTouchMove">{{item.nav}}</text>
              </view>
              <!-- 字母索引 end -->
            </view>
          </view>
          <!-- 取消确定 -->
          <view class="foot-btn" wx:if="{{!isFirstId}}">
            <view>
              <view class="cancel" bindtap="clickReset">重置</view>
              <view class="comfir" bindtap="clickComfir">确认</view>
            </view>
          </view>
        </view>

js代码

1、点击右边索引字母实现跳转到对应的位置

// 点击英文字母进行跳转到相应位置
  cityScroll(e) {
    let data = this.data.carBrandList
    let Index = e.currentTarget.dataset.index
    let initial = data[Index].initial
    console.log(initial)
    if (data.length) {
      data.map((res, index) => {
        if (initial == res.initial) {
          this.setData({
            currentInitial: index,
            toView: `city${index}`//用于定位
          })
        }
      })
    }
    wx.showToast({
      title: initial,
      icon: 'none'
    })
  },

上面的toView是利用小程序的scroll-view组件的scroll-into-view属性（值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素）将每一块的车型（首字母为A的为一块）的顶层元素设置一个id，对应上面绑定的id="{{‘city’+index}}" 点击的时候可以获取到当前的index,然后实现跳转。

2、搜索关键词高亮

//搜索关键词
  searchKey() {
    this.setData({
      isFirstId: false
    })
    if (this.data.searchValue) {
      netRequest.webRequest(getApi.getKeyWords, {
        keyWords: this.data.searchValue
      }, "get").then(res => {
        let data = res.data
        if (data.length) {
          data.map(item => {
            item.fullName = this.getSpit(item.fullName, item.brandName)
          })
          this.setData({
            searchList: data
          })
          this.searchTap()
        }
      })
    } else {
      this.setData({
        searchList: '',
        carBrandList: this.data.copyBrand,
        isFirstId: true
      })
    }
  },
  //处理关键词高亮
  searchTap: function() {
    var that = this;
    that.setData({
      listDataCopy: that.data.searchList//搜索关键词后台返回的搜索列表
    })
    var data = that.data.searchList;
    var newData = that.data.listDataCopy;
    for (var i = 0; i < data.length; i++) {
      var dic = data[i]
      var newDic = newData[i]
      var fullName = dic["fullName"]
      newDic["fullName"] = this.getInf(fullName, that.data.searchValue);
    }
    that.setData({
      searchList: newData,
    })
    console.log(this.data.searchList)
  },
   //整理关键词
  getInf(str, key) {
    return str.toString().replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%')
  },

实现思路：首先根据关键词去获取后台返回的搜索值列表，然后遍历这个数组，拿到需要展示的属性，例子是fullName,将搜索关键词与遍历的fullName传入getInf函数，该函数实现在fullName中找到（fullName中一定有关键词字符串，因为是根据关键词搜索出来的值）找到之后将fullName分隔开，如fluuName=“宝马X5M”,关键词为“宝马”，那么getInf返回的是["",“宝马”,“X5M”]的数组，然后在界面遍历这个数组，并且遍历的item如果跟搜索值"宝马"相同那么添加高亮的calss，上例为数组的第二个（下标为1）会添加高亮的calss，从而实现关键词“宝马”高亮的效果。

扩展功能

实现手指滑动右侧的索引字母列表跳转到对应的位置
本项目因为scroll-view组件的原因，存在动画延迟跳转所以为实现这个功能。可以参考以下思路：
想要手指滑动索引跳转到对应位置需要计算每一块的高度，并获取计算出，触摸的pageY和触摸时的一直变化的pageY的差值/每个索引元素的高度，代码如下：

 //获取每一项组合的高度（根据首字母分组）
  calculateHeight() {
    let that = this
    const query = wx.createSelectorQuery()
    const list = query.selectAll('.listGroup')
    if (this.data.isFirstId) {
      const height = query.select('.navlist')
      //获取第一个字母索引元素的高度
      height.boundingClientRect(function(rect) {
        that.setData({
          height: rect.height
        })
      }).exec()
    }
    let arr = []
    list.boundingClientRect(function(rect) {
      if (rect.length) {
        rect.map(res => {
          arr.push(res.height)
        })
        that.setData({
          listHeight: arr
        })
        console.log(arr)
      }
    }).exec()
  },

上图的wx.createSelectorQuery是小程序自带获取demo元素的api，传送门=>boundingClientRect
该api可以直接获取元素的高度、宽度、left、right、top、bottom等等信息。

结语

划水结束。趁空闲时间写的，有点赶，如有错误请联系我！本人微信：huang009516