微信小程式--根據首字母選擇城市

摘要： 首先看一下專案截圖 業務場景：專案中有時會遇到根據首字母選擇城市，或者根據首字母選擇通訊錄姓名等等，那如果按照以前的思路需要用判斷滾動條的位置，才能滑動到哪個地方。小程式官方有提供 scroll-into-view 屬性，可以更快的解決這個場景。 小程式官方提...

首先看一下專案截圖

業務場景：專案中有時會遇到根據首字母選擇城市，或者根據首字母選擇通訊錄姓名等等，那如果按照以前的思路需要用判斷滾動條的位置，才能滑動到哪個地方。小程式官方有提供 scroll-into-view 屬性，可以更快的解決這個場景。

小程式官方提供的屬性描述。小程式文件

程式碼實現

wxml程式碼片段

<scroll-view scroll-y scroll-into-view="{{intoview}}">
//右側定位存在的首字母
<view class="searchLetter">
<view
 wx:for="{{provinceList}}"
 wx:for-index="key"
 wx:for-item="value"
 wx:key="index"
 data-id="{{key}}"
 bindtap="scrollToSelect"
>{{key}}
</view>
</view>
<view class="selection" wx:for="{{provinceList}}" wx:key="key" id="{{key}}">
//省略遍歷省份，資料結構最好是map格式，根據首字母遍歷
</view>
</scroll-view>
複製程式碼

注意

1. scroll-view 元件需要設定 scroll-y 豎向滾動。
2. scroll-into-view 的值就是選中的首字母，子元素需要設定屬性 id （鍵值就是首字母A、B、C等等）。
3. scrollToSelect 方法是用於點選字母，給 scroll-into-view 賦值。
4. 這裡踩過一個坑， scroll-view 必須要設定固定高度，否則點選首字母無效。

效果圖

有了 scroll-into-view ，實現首字母選擇城市就變得很簡單了，看下效果圖吧。