小程序自定义索引菜单

下面我将为大家讲解小程序自定义索引菜单的完整攻略。

什么是小程序自定义索引菜单

小程序自定义索引菜单是一种方便用户快速查找内容的菜单，基于小程序原生索引菜单，可以根据不同的需求扩展自己的索引菜单。

如何开启自定义索引菜单

在小程序的app.json文件中，开启自定义索引菜单的方式如下：

{
  "window": {
    "enablePullDownRefresh": true,
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序",
    "navigationStyle": "custom",
    "indexes": [
      {"title":"A", "key":"A"},
      {"title":"B", "key":"B"},
      {"title":"C", "key":"C"},
      {"title":"D", "key":"D"},
      {"title":"E", "key":"E"},
      {"title":"F", "key":"F"},
      {"title":"G", "key":"G"},
      {"title":"H", "key":"H"},
      {"title":"I", "key":"I"},
      {"title":"J", "key":"J"},
      {"title":"K", "key":"K"},
      {"title":"L", "key":"L"},
      {"title":"M", "key":"M"},
      {"title":"N", "key":"N"},
      {"title":"O", "key":"O"},
      {"title":"P", "key":"P"},
      {"title":"Q", "key":"Q"},
      {"title":"R", "key":"R"},
      {"title":"S", "key":"S"},
      {"title":"T", "key":"T"},
      {"title":"U", "key":"U"},
      {"title":"V", "key":"V"},
      {"title":"W", "key":"W"},
      {"title":"X", "key":"X"},
      {"title":"Y", "key":"Y"},
      {"title":"Z", "key":"Z"}
    ]
  }
}

可以看到，开启自定义索引菜单只需要在app.json文件中设置indexes属性即可。indexes是一个包含多个对象的数组，每个对象代表一个索引项，其中title属性为展示在索引菜单中的文字，key属性为该索引项对应的区域的 id 值。

如何实现自定义索引菜单的点击事件

当用户点击索引菜单中的某个选项后，我们需要将页面滚动到对应的区域。这可以通过小程序提供的Page对象的selectComponent方法和scrollIntoView方法来实现。

// 在页面中获取索引菜单组件的实例
const indexBar = this.selectComponent("#index-bar");

// 监听索引菜单组件的点击事件
indexBar.onTapIndex = (event) => {
  // 获取点击的索引项的 key 值
  const key = event.detail.indexKey;

  // 获取对应区域的 id
  const query = wx.createSelectorQuery().in(this);
  query.select(`#${key}`).boundingClientRect((res) => {
    // 将页面滚动到对应区域
    wx.pageScrollTo({
      scrollTop: res.top,
      duration: 300
    });
  }).exec();
};

在示例代码中，通过selectComponent方法获取索引菜单组件的实例，然后监听其点击事件onTapIndex。当用户点击索引菜单中的某个选项时，会触发该事件，返回点击的索引项对应的key值。接着，我们通过createSelectorQuery方法获取对应区域的BoundingClientRect，并传入scrollTo方法中实现滚动。

示例说明

示例一：按字母分类的联系人列表

在联系人列表页面中，实现按字母分类的索引菜单，用户点击索引菜单中的某个选项后，页面滚动到对应字母的联系人列表。

{
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "联系人列表",
    "navigationStyle": "custom",
    "indexes": [
      {"title":"A", "key":"A"},
      {"title":"B", "key":"B"},
      {"title":"C", "key":"C"},
      {"title":"D", "key":"D"},
      {"title":"E", "key":"E"},
      {"title":"F", "key":"F"},
      {"title":"G", "key":"G"},
      {"title":"H", "key":"H"},
      {"title":"I", "key":"I"},
      {"title":"J", "key":"J"},
      {"title":"K", "key":"K"},
      {"title":"L", "key":"L"},
      {"title":"M", "key":"M"},
      {"title":"N", "key":"N"},
      {"title":"O", "key":"O"},
      {"title":"P", "key":"P"},
      {"title":"Q", "key":"Q"},
      {"title":"R", "key":"R"},
      {"title":"S", "key":"S"},
      {"title":"T", "key":"T"},
      {"title":"U", "key":"U"},
      {"title":"V", "key":"V"},
      {"title":"W", "key":"W"},
      {"title":"X", "key":"X"},
      {"title":"Y", "key":"Y"},
      {"title":"Z", "key":"Z"}
    ]
  }
}

<view class="index-bar">
  <index-bar indexes="{{indexes}}" bindtapindex="onTapIndex" />
</view>
<view class="contact-list">
  <view id="A" class="group">
    <view class="title">A</view>
    <view class="item">Alice</view>
    <view class="item">Alex</view>
  </view>
  <view id="B" class="group">
    <view class="title">B</view>
    <view class="item">Bob</view>
    <view class="item">Ben</view>
  </view>
  <!-- 其他字母组... -->
</view>

示例二：右侧浮动的全局自定义索引菜单

在小程序的每个页面中，都添加一个右侧浮动的自定义索引菜单，方便用户快速查找内容。

{
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序",
    "navigationStyle": "custom",
    "indexes": []
  }
}

<view class="index-bar">
  <index-bar class="global" indexes="{{indexes}}" bindtapindex="onTapIndex" />
</view>
<!-- 页面内容... -->

.index-bar {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}
.index-bar.global {
  bottom: 16px;
  top: auto;
}

在示例中，我们将indexes设置为空数组，表示自定义索引菜单不显示任何选项。然后，在每个页面中添加一个右侧浮动的自定义索引菜单，通过class="global"来区分全局和局部的索引菜单，在点击事件处理函数onTapIndex中根据实际情况来处理滚动效果即可。