直入主題抵窒，實(shí)現(xiàn)什么蛇皮東西呢弛针？大概是這個(gè)樣子：
點(diǎn)擊右邊字母表的某個(gè)字母能跳轉(zhuǎn)，然后搜索:
先一步一步來李皇，首先渲染出這個(gè)城市列表削茁，為了方便而且中國的城市名稱基本不會有變動，所以我直接把城市的數(shù)據(jù)全部寫在一個(gè)對象里面導(dǎo)出掉房，當(dāng)然不可能手寫茧跋，大家百度就可以拿得到，這里我提供一個(gè):中國所有城市按拼音排序json文件
然后大家把這個(gè)文件的 cities對象整個(gè)復(fù)制出來卓囚，在你的小程序的某個(gè)js文件中：
然后在你要用的地方就可以引用：
import {citys} from '../../base/citys.js' // 你的路徑
這樣就可以得到全部城市的信息瘾杭，然后去遍歷，但是這個(gè)citys是個(gè)對象哪亿，在小程序中去wx:for一個(gè)對象粥烁，然后對象的每個(gè)屬性才是數(shù)組，會是怎么樣的呢蝇棉？
其實(shí)就是跟遍歷二維數(shù)組一樣讨阻，進(jìn)行雙層遍歷，然后區(qū)別我在下面再講银萍，先看代碼:
<view wx:for="{{citys}}"
wx:for-index="key" // 重命名wx:for的索引
wx:for-item="value" // 重命名wx:for的循環(huán)項(xiàng)
wx:key="{{key}}">
<view id="{{key}}" class="search-title">{{key}}</view> // 每一組的標(biāo)題也就是A变勇、B、C...
<view wx:for="{{value}}"
wx:key="{{index}}"
class="item-label">
<text>{{item.name}}</text>
</view>
</view>
第一層循環(huán)是去循環(huán)對象贴唇，wx:for的索引名稱默認(rèn)是index搀绣，如果是去遍歷對象，那這個(gè)索引就是對象的key戳气，也就是ABCD捂寿，所以我將它改名為key柠傍，然后將每一個(gè)循環(huán)項(xiàng)的名稱改為value，就是上面的每一個(gè)數(shù)組，第二層遍歷就是正常的遍歷數(shù)組叶堆，這樣就可以遍歷出整個(gè)城市列表。
- 接下來是右邊的字母表
拿同樣的數(shù)據(jù)去遍歷就可以秦躯，這次只需要顯示出對象的key就可以:
<view class="alphabet">
<view wx:for="{{citys}}"
wx:for-index="key"
wx:key="{{key}}"
class="alphabet-item"
catchtap="chooseCitys"
data-id="{{key}}">
{{key}}
</view>
</view>
接下來是實(shí)現(xiàn)點(diǎn)擊字母表的字母跳轉(zhuǎn)到列表的指定位置件蚕，看我上面的兩段代碼，在城市列表的每一組標(biāo)題我給綁定了id夜赵，是用對象的key綁定明棍，也就是A、B寇僧、C摊腋、D...沸版，然后在字母表的每一個(gè)字母也綁定了自定義屬性data-id，同樣也是用key綁定兴蒸，這樣和上面的標(biāo)題對應(yīng)上视粮，接下來就是實(shí)現(xiàn)。
首先我們要跳轉(zhuǎn)到指定位置橙凳，超人鴨看了小程序的組件文檔蕾殴，發(fā)現(xiàn)了一個(gè)叫scroll-view的組件，這是它的部分屬性:
我圈住的屬性就是實(shí)現(xiàn)跳轉(zhuǎn)的關(guān)鍵痕惋，傳入一個(gè)元素id区宇，就可以跳轉(zhuǎn)到指定元素的位置，我們把城市列表都包裹中scroll-view組件里面值戳，并寫上相應(yīng)屬性:
<scroll-view scroll-y="true"
style="height:100%;"
scroll-into-view="{{id}}">
// 城市列表
</scroll-view>
這里需要注意的一個(gè)點(diǎn)是設(shè)置scroll-view組件的方向?yàn)榭v向的時(shí)候需要為組件指定高度议谷。
給scroll-into-view動態(tài)的綁定一個(gè)id，需要在data中定義id這個(gè)變量
然后在字母表的點(diǎn)擊事件中改變這個(gè)id堕虹，記得我們上面給每個(gè)字母綁定了自定義屬性data-id="{{key}}"卧晓，在點(diǎn)擊事件中可以拿到:
chooseCitys(event) { // 點(diǎn)擊字母表跳轉(zhuǎn)到指定的城市列表
const id = event.target.dataset.id
console.log(id)
this.setData({
id
})
}
這樣就完成了點(diǎn)擊字母表進(jìn)行跳轉(zhuǎn)的功能，接下來是搜索赴捞，回到一開始的城市列表數(shù)據(jù)逼裆，每個(gè)城市都有中文名和拼音，所以可以實(shí)現(xiàn)通過名稱或者拼音實(shí)現(xiàn)搜索赦政，這是搜索框：
<input class="search-input" placeholder="請輸入城市中文名或拼音" bindinput="handleInput"></input>
然后先看我一開始貼的demo圖胜宇，搜索之后，整個(gè)頁面是顯示搜索結(jié)果恢着，我自己的實(shí)現(xiàn)方式是在原來的頁面上加一個(gè)層桐愉，設(shè)置z-index遮住原來的頁面，先看看wxml:
<view class="search-content" hidden="{{!isShow}}">
<scroll-view scroll-y style="height:100%;">
<view wx:for="{{searchCitys}}" wx:key="{{index}}">
<text>{{item.name}}</text>
</view>
<view wx:if="{{!searchCitys.length}}">沒有匹配數(shù)據(jù)</view>
</scroll-view>
</view>
看看這一個(gè)view的樣式:
.search-content{
position: absolute;
top: 110rpx; // 搜索框的高度
left: 0;
bottom: 0;
right: 0;
z-index: 3;
}
然后上面定義兩個(gè)變量掰派，一個(gè)是isShow控制這一層的出現(xiàn)與消失从诲，第二個(gè)是searchCitys，也就是搜索出來的結(jié)果靡羡，都需要在data中定義系洛，然后邏輯在input的輸入事件中執(zhí)行，上面定義了bindinput="handleInput"
handleInput(event){ // 輸入框輸入或改變事件
let value = event.detail.value // 獲取輸入框中的值
let list = [] // 臨時(shí)變量
this.setData({
isShow: true // 顯示
})
if(value == '') { // 如果清空輸入框
this.setData({
isShow: false, // 隱藏
searchCitys: [] // 清空搜索結(jié)果
})
return // 不再往下執(zhí)行(重要!)
}
for(let k in citys) { // 進(jìn)行匹配略步，citys就是全部城市數(shù)據(jù)
citys[k].forEach((item) => {
if(item.spell.indexOf(value) != -1 || item.name.indexOf(value) != -1) {
list.push(item)
}
})
}
this.setData({
searchCitys: list // 賦值
})
}
這樣就實(shí)現(xiàn)了搜索框一輸入就會顯示那一層搜索結(jié)果的頁面描扯，如果清空搜索結(jié)果就會自動隱藏，同時(shí)實(shí)現(xiàn)了搜索功能與提示:
這次超人鴨是在原來的功能上提煉出這個(gè)功能來寫博文趟薄，代碼也都是盲改绽诚，邏輯是沒錯(cuò)的，但如果代碼有錯(cuò)誤或者有其他方法，歡迎指教哦憔购。
