// index.wxml<view class="main"> <!-- 頂部搜索區域 --> <view class="header"> </view> <!-- 內容區域 --> <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.jsComponent({ properties: {}, // 組件的對外屬性 data: {},  // 組件的內部數據 lifetimes: {}, // 生命周期 methods: {}  // 事件});

// 漢字對應的Unicode編碼文件// oMultiDiff = 多音字 | firstLetterMap = 漢字import firstStore from './firstChineseLetter'; // 獲取首字母拼音function getFirstLetter (val) { const firstVal = val.charAt(0); if (/.*[/u4e00-/u9fa5]+.*/.test(firstVal)) { // 處理中文字符 // 轉換成Unicode編碼，與firstStore里面的數據進行對比，然后返回對應的參數 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('東城區');// 輸出結果：D

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

// 靜態數據的存儲const Static = { list: []}Component({ ... methods: { // 初始/重置數據 init () {  const { data, attr } = this.properties;  let changeData = [], // 轉換后的數據   inChangeData = {}; // 存儲轉換后的數據對應字母的索引值     data.map(v => {  // 獲取首字母拼音  let firstLetter = this.getFirstLetter(v[attr]);     // 循環對比檢測  firstLetter.split('').map(str => {   if (str in inChangeData) {   // 有首字母相同的項，   // 則添加入已有的項里面   changeData[inChangeData[str]].list.push(v);   } else {   // 沒有首字母相同的項，   // 則在尾部追加一條新的數據，   // 儲存對應的字母值（firstLetter），   // 同時存儲該字母對應的索引   changeData.push({ firstLetter: str, list: [v] });   inChangeData[str] = changeData.length - 1;   }  });  });    // 此時轉換后的數組屬于亂序，  // 需要對亂序的數組進行排序  changeData.sort((pre, next) => pre.firstLetter < next.firstLetter ? -1 : 1);    // 若存在“#”項，將位置位移至底部  if (changeData[0].firstLetter === '#') {  const firstArr = changeData.splice(0, 1);  changeData = [...changeData, ...firstArr];  }  // 存儲轉換后的數據，  // this.data.list的數據對應頁面的展示數據，因為有搜索功能，數據可能會變更，  // 在靜態的數據里面，也存儲1份數據，方便后續的搜索等功能。  this.setData({ list: changeData });  Static.list = changeData; }, } ...});

Component({ lifetimes: { // 在組件實例進入頁面節點樹時執行初始化數據 attached () {  this.init(); } }, observers: { // 考慮到組件傳遞的數據存在變更的可能， // 在數據變更的時候，也要做一次初始化 '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存儲的靜態數據，用來做數據對比  const { attr } = this.properties; // 要對比的屬性值  let result = [], tem = {};    // 沒有搜索內容，返回全部內容  if (value.length === 0) { this.setData({ list: Static.list }); return; }  // 檢索搜索內容  list.map(v => {  // 獲取所有跟value匹配上的數據  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;   }  }  });    // 存儲數據  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，所以每個字母的區域是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();   }  });  } }, } ...});