前言

首先看一下项目截图

业务场景：项目中有时会遇到根据首字母选择城市，或者根据首字母选择通讯录姓名等等，那如果按照以前的思路需要用判断滚动条的位置，才能滑动到哪个地方。小程序官方有提供scroll-into-view属性，可以更快的解决这个场景。

小程序官方提供的属性描述。

代码实现

wxml代码片段

    
     	    //右侧定位存在的首字母	    
         		
      
       {
   {key}}    		
      		
     	    
     
      	        //省略遍历省份，数据结构最好是map格式，根据首字母遍历	    
     	
    复制代码

注意

1. scroll-view组件需要设置scroll-y竖向滚动。
2. scroll-into-view的值就是选中的首字母，子元素需要设置属性id（键值就是首字母A、B、C等等）。
3. scrollToSelect方法是用于点击字母，给scroll-into-view赋值。
4. 这里踩过一个坑，scroll-view必须要设置固定高度，否则点击首字母无效。

效果图

有了scroll-into-view，实现首字母选择城市就变得很简单了，看下效果图吧。