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

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

<scroll-view class="scroll">
 <view class="dl">
  <view class="dt">這里是字母標(biāo)題。</view>
  <view class="dd">
  <span>這里當(dāng)然是展示的內(nèi)容啦。</span>
  </view>
 </view>
 </scroll-view>

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

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

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

// 漢字對(duì)應(yīng)的Unicode編碼文件
// oMultiDiff = 多音字 | firstLetterMap = 漢字
import firstStore from './firstChineseLetter'; 

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

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

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

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

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

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

  // 存儲(chǔ)轉(zhuǎn)換后的數(shù)據(jù)，
  // this.data.list的數(shù)據(jù)對(duì)應(yīng)頁(yè)面的展示數(shù)據(jù)，因?yàn)橛兴阉鞴δ?，?shù)據(jù)可能會(huì)變更，
  // 在靜態(tài)的數(shù)據(jù)里面，也存儲(chǔ)1份數(shù)據(jù)，方便后續(xù)的搜索等功能。
  this.setData({ list: changeData });
  Static.list = changeData;
 },
 }
 ...
});

Component({
 lifetimes: {
 // 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行初始化數(shù)據(jù)
 attached () {
  this.init();
 }
 },
 observers: {
 // 考慮到組件傳遞的數(shù)據(jù)存在變更的可能，
 // 在數(shù)據(jù)變更的時(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; // 用戶(hù)輸入的值
  const { list } = Static; // init存儲(chǔ)的靜態(tài)數(shù)據(jù)，用來(lái)做數(shù)據(jù)對(duì)比
  const { attr } = this.properties; // 要對(duì)比的屬性值
  let result = [], tem = {};
  
  // 沒(méi)有搜索內(nèi)容，返回全部?jī)?nèi)容
  if (value.length === 0) { this.setData({ list: Static.list }); return; }

  // 檢索搜索內(nèi)容
  list.map(v => {
  // 獲取所有跟value匹配上的數(shù)據(jù)
  const searchList = v.list.filter(v => v[attr].indexOf(value) !== -1);
  
  if (searchList.length > 0) {
   // 此處原理類(lèi)似樓上init的對(duì)比，此處不細(xì)說(shuō)，
   // 反正我懶我有理（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;
   }
  }
  });
  
  // 存儲(chǔ)數(shù)據(jù)
  this.setData({ list: result, search: value });
 }
 },
 ...
});

<!-- 側(cè)邊導(dǎo)航 -->
 <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 }}
  <!-- 以下這塊就是新增的結(jié)構(gòu)啦 S -->
  <view 
  class="max {{ item.firstLetter === scrollIntoView && subNavHint ? 'show' : '' }}" 
  data-desc="{{ item.firstLetter }}"
  ></view>
  <!-- 以上這塊就是新增的結(jié)構(gòu)啦 E -->
 </view>
 </view>

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

Component({
 ...
 data: {
 scrollIntoView: '', // 標(biāo)記當(dāng)前處于哪個(gè)字母
 subNavHint: false, // 控制借(chao)鑒(xi)微信效果的元素
 },
 methods: {
 subTouchStart () {
  this.setData({ subNavHint: true, scrollIntoView: '' });
 },
 subTouchEnd () {
  this.setData({ subNavHint: false });
 },
 subTouchMove (e) {
  // 獲取字母導(dǎo)航欄元素對(duì)應(yīng)的值
  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; // 導(dǎo)航元素距離頂部的位置
  const { list } = this.data;
  
  // 計(jì)算索引，
  // 或許看到這里有人會(huì)疑問(wèn)，為什么是除以20？
  // 因?yàn)闃邮嚼锩妫覍?xiě)的高度是20px，所以每個(gè)字母的區(qū)域是20px。
  let index = Math.round((clientY - DomTop) / 20); 
  index = index >= list.length ? list.length - 1 : index; // 限制索引大于0
  index = index < 0 ? 0 : index; // 限制索引小于0
  // 限制結(jié)果重復(fù)賦值
  if (list[index].firstLetter !== this.data.scrollIntoView) {
   this.setData({ scrollIntoView: list[index].firstLetter });
   // 加個(gè)抖動(dòng)效果
   wx.vibrateShort(); 
  }
  });
  }
 },
 }
 ...
});