微信小程序使用vant-weapp IndexBar 自定义索引栏

vant-weapp IndexBar组件可实现点击索引栏时，自动跳转到对应的IndexAnchor锚点位置。

演示

点击索引栏时可快速跳转到该栏对应的锚点位置。

代码

index.wxml

<van-index-bar index-list="{{ indexList }}" scroll-top="{{ scrollTop }}">
    <van-index-anchor wx:for="{{customerList}}" wx:key="index" index="{{item.firstLetter}}" use-slot="{{true}}">
        {{item.firstLetter}}
        <van-cell wx:for="{{item.list}}" wx:key="index" data-id="{{item.code}}" data-name="{{item.name}}" title="{{item.name}}" bindtap="getCustomer" />
    </van-index-anchor>
</van-index-bar>

index.js

Page({
  data: {
    type: "",
    /** 索引栏*/
    indexList: ["A", "B", "C", "D"],
    scrollTop: 0,
    /** mock客户数据*/
    customerList: [
      {
        firstLetter: "A",
        list: [
          { code: "AB01", name: "A1客户" },
          { code: "AB02", name: "A2客户" },
          { code: "AB03", name: "A3客户" },
        ],
      },
      {
        firstLetter: "B",
        list: [
          { code: "BB01", name: "B1客户" },
          { code: "BB02", name: "B2客户" },
          { code: "BB03", name: "B3客户" },
          { code: "BB04", name: "B4客户" },
        ],
      },
      {
        firstLetter: "C",
        list: [
          { code: "CB01", name: "C1客户" },
          { code: "CB02", name: "C2客户" },
          { code: "CB03", name: "C3客户" },
          { code: "CB04", name: "C4客户" },
          { code: "CB05", name: "C5客户" },
        ],
      },
      {
        firstLetter: "D",
        list: [
          { code: "DB01", name: "D1客户" },
          { code: "DB02", name: "D2客户" },
          { code: "DB03", name: "D3客户" },
          { code: "DB04", name: "D4客户" },
          { code: "DB05", name: "D5客户" },
          { code: "DB06", name: "D6客户" },
        ],
      },
    ],
  },
	
  //索引栏发生变化事件	
  onPageScroll(event) {
    this.setData({
      scrollTop: event.scrollTop,
    });
  },

  /**选择客户发生事件 */
  getCustomer: function (event) {
    console.log(event.currentTarget.dataset.id);
    console.log(event.currentTarget.dataset.name);
 
  },
});