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

前言

首先看一下項目截圖

業務場景：項目中有時會遇到根據首字母選擇城市，或者根據首字母選擇通信錄姓名等等，那若是按照之前的思路須要用判斷滾動條的位置，才能滑動到哪一個地方。小程序官方有提供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，實現首字母選擇城市就變得很簡單了，看下效果圖吧。