// index.wxml
<view class="main">
 <!-- 頂部搜索區(qū)域 -->
 <view class="header">
 </view>
 <!-- 內容區(qū)域 -->
 <scroll-view class="scroll">
 </scroll-view>
 <!-- 側邊導航 -->
 <view class="sub_nav">
 </view>
</view>

<view class="header">
 // 這里或許有人要問，為啥不用小程序的label組件呢。?_?
 // 原因就是...我就不用，你還能咬我？！^(oo)^
 // 哈哈哈哈～開個玩笑，其實是小程序的label組件還沒支持input!
 <view class="label"> 
  <icon></icon>
  <input type="text" placeholder="搜索" />
 </view>
</view>

<scroll-view class="scroll">
 <view class="dl">
  <view class="dt">這里是字母標題。</view>
  <view class="dd">
  <span>這里當然是展示的內容啦。</span>
  </view>
 </view>
 </scroll-view>

<view class="sub_nav">
 <view class="option">這里是輸出字母。</view>
</view>

// index.json
{
 "component": true
}

// index.js
Component({
 properties: {}, // 組件的對外屬性
 data: {},  // 組件的內部數(shù)據
 lifetimes: {}, // 生命周期
 methods: {}  // 事件
});

// 漢字對應的Unicode編碼文件
// oMultiDiff = 多音字 | firstLetterMap = 漢字
import firstStore from './firstChineseLetter'; 

// 獲取首字母拼音
function getFirstLetter (val) {
 const firstVal = val.charAt(0);
 if (/.*[\u4e00-\u9fa5]+.*/.test(firstVal)) {
 // 處理中文字符
 // 轉換成Unicode編碼，與firstStore里面的數(shù)據進行對比，然后返回對應的參數(shù)
 const code = firstVal.charCodeAt(0); // 轉換成Unicode編碼
 return code in firstStore.oMultiDiff ? firstStore.oMultiDiff[code] : firstStore.firstLetterMap.charAt(code - 19968);
 } else {
 // 這里處理非中文
 // 檢測是否字母，如果是就直接返回大寫的字母
 // 不是的話，返回“#”
 return /^[a-zA-Z]+$/.test(firstVal) ? firstVal.toUpperCase() : '#';
 }
}

getFirstLetter('東城區(qū)');
// 輸出結果：D

Component({
 // 組件的對外屬性
 properties: {
 data: { type: Array, value: [], }, // 組件外傳遞進來的數(shù)據
 attr: { type: String, value: 'label' }, // 需要進行首字母處理的屬性，默認是"label"
 },
 ...
})

// 靜態(tài)數(shù)據的存儲
const Static = {
 list: []
}

Component({
 ...
 methods: {
 // 初始/重置數(shù)據
 init () {
  const { data, attr } = this.properties;

  let changeData = [], // 轉換后的數(shù)據
   inChangeData = {}; // 存儲轉換后的數(shù)據對應字母的索引值
   
  data.map(v => {
  // 獲取首字母拼音
  let firstLetter = this.getFirstLetter(v[attr]); 
  
  // 循環(huán)對比檢測
  firstLetter.split('').map(str => {
   if (str in inChangeData) {
   // 有首字母相同的項，
   // 則添加入已有的項里面
   changeData[inChangeData[str]].list.push(v);
   } else {
   // 沒有首字母相同的項，
   // 則在尾部追加一條新的數(shù)據，
   // 儲存對應的字母值（firstLetter），
   // 同時存儲該字母對應的索引
   changeData.push({ firstLetter: str, list: [v] });
   inChangeData[str] = changeData.length - 1;
   }
  });
  });
  
  // 此時轉換后的數(shù)組屬于亂序，
  // 需要對亂序的數(shù)組進行排序
  changeData.sort((pre, next) => pre.firstLetter < next.firstLetter ? -1 : 1);
  
  // 若存在“#”項，將位置位移至底部
  if (changeData[0].firstLetter === '#') {
  const firstArr = changeData.splice(0, 1);
  changeData = [...changeData, ...firstArr];
  }

  // 存儲轉換后的數(shù)據，
  // this.data.list的數(shù)據對應頁面的展示數(shù)據，因為有搜索功能，數(shù)據可能會變更，
  // 在靜態(tài)的數(shù)據里面，也存儲1份數(shù)據，方便后續(xù)的搜索等功能。
  this.setData({ list: changeData });
  Static.list = changeData;
 },
 }
 ...
});

Component({
 lifetimes: {
 // 在組件實例進入頁面節(jié)點樹時執(zhí)行初始化數(shù)據
 attached () {
  this.init();
 }
 },
 observers: {
 // 考慮到組件傳遞的數(shù)據存在變更的可能，
 // 在數(shù)據變更的時候，也要做一次初始化
 'data, attr, icon' (data, attr) {
  this.init();
 }
 },
})

<view class="main">
 ...
 <view class="header">
 <view class="label">
  <icon></icon>
  <input type="text" placeholder="搜索" value="{{ search }}" bindinput="searchData" />
 </view>
 </view>
 ...
</view>

const Static = {
 list: []
}

Component({
 ...
 methods: {
 searchData (e) {
  const { value } = e.detail; // 用戶輸入的值
  const { list } = Static; // init存儲的靜態(tài)數(shù)據，用來做數(shù)據對比
  const { attr } = this.properties; // 要對比的屬性值
  let result = [], tem = {};
  
  // 沒有搜索內容，返回全部內容
  if (value.length === 0) { this.setData({ list: Static.list }); return; }

  // 檢索搜索內容
  list.map(v => {
  // 獲取所有跟value匹配上的數(shù)據
  const searchList = v.list.filter(v => v[attr].indexOf(value) !== -1);
  
  if (searchList.length > 0) {
   // 此處原理類似樓上init的對比，此處不細說，
   // 反正我懶我有理（0.0）
   if (v.firstLetter in tem) {
   const _list = result[tem[v.firstLetter]].lish;
   result[tem[v.firstLetter]].lish = [..._list, ...searchList];
   } else {
   result.push({ firstLetter: v.firstLetter, list: [...searchList] });
   tem[v.firstLetter] = result.length - 1;
   }
  }
  });
  
  // 存儲數(shù)據
  this.setData({ list: result, search: value });
 }
 },
 ...
});

<!-- 側邊導航 -->
 <view class="sub_nav" id="subNav" catchtouchstart="subTouchStart" catchtouchmove="subTouchMove" catchtouchend="subTouchEnd">
 <view class="option" wx:for="{{ list }}" data-firstLetter="{{ item.firstLetter }}" wx:key="firstLetter">
  {{ item.firstLetter }}
  <!-- 以下這塊就是新增的結構啦 S -->
  <view 
  class="max {{ item.firstLetter === scrollIntoView && subNavHint ? 'show' : '' }}" 
  data-desc="{{ item.firstLetter }}"
  ></view>
  <!-- 以上這塊就是新增的結構啦 E -->
 </view>
 </view>

const Static = {
 list: [],
 timer: null
}

Component({
 ...
 data: {
 scrollIntoView: '', // 標記當前處于哪個字母
 subNavHint: false, // 控制借(chao)鑒(xi)微信效果的元素
 },
 methods: {
 subTouchStart () {
  this.setData({ subNavHint: true, scrollIntoView: '' });
 },
 subTouchEnd () {
  this.setData({ subNavHint: false });
 },
 subTouchMove (e) {
  // 獲取字母導航欄元素對應的值
  const query = this.createSelectorQuery();
  query.select('#subNav').boundingClientRect();
  query.selectViewport().scrollOffset();
  query.exec(res => {
  const { clientY } = e.touches[0]; // Y軸的位置
  const DomTop = res[0].top; // 導航元素距離頂部的位置
  const { list } = this.data;
  
  // 計算索引，
  // 或許看到這里有人會疑問，為什么是除以20？
  // 因為樣式里面，我寫的高度是20px，所以每個字母的區(qū)域是20px。
  let index = Math.round((clientY - DomTop) / 20); 
  index = index >= list.length ? list.length - 1 : index; // 限制索引大于0
  index = index < 0 ? 0 : index; // 限制索引小于0
  // 限制結果重復賦值
  if (list[index].firstLetter !== this.data.scrollIntoView) {
   this.setData({ scrollIntoView: list[index].firstLetter });
   // 加個抖動效果
   wx.vibrateShort(); 
  }
  });
  }
 },
 }
 ...
});