小程序中scroll-view组件实现效果之--------城市列表页的索引（scroll-into-view）

想要实现的功能是在一个城市列表页实现字母索引

点击字母跳转到相应的位置，在小程序里面利用scroll-view特别简单

首先需要索引字母添加一个点击事件，捕获到点击的id

  <view wx:for ="{{searchLetter}}" wx:key="index" data-letter="{{item.name}}" catchtouchend="clickLetter">{{item.name}}</view>

然后给每个字母那行加上一个id="{{outeritem.initial}}"，每次点击索引字母，把捕获到的data-letter="{{item.name}}" 的值赋值给scroll-into-view="{{scrollTopId}}" 中的scrollTopId，那么就会自动跳转到和scrollTopId相同的id那块区域

 <scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll" scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}">
 	 <view  wx:for="{{CityList}}" wx:key="{{item.initial}}" wx:for-item="outeritem">
            <view class='country-letter' id="{{outeritem.initial}}">
              <text class='letter-txt fs28'>{{outeritem.initial}}</text>
            </view>
            <block wx:for="{{outeritem.data}}" wx:for-item="inneritem" wx:key="{{outeritem.initial}}">
              <view class='country-list-box'>
                  <view class='country-list'>
                    <view wx:if="{{inneritem.name == indexcityname }}" class='country-name-list cur' data-cityname="{{inneritem.name}}" data-cityid="{{inneritem.id}}" bindtap="cityTap">
                        <text class='country-name fs28'>{{inneritem.name}}</text>
                        <icon class='icon-check'></icon>
                    </view>
                    <view wx:else class='country-name-list' data-cityname="{{inneritem.name}}" data-cityid="{{inneritem.id}}" bindtap="cityTap">
                        <text class='country-name fs28'>{{inneritem.name}}</text>
                    </view>
                  </view>
                </view>
            </block>
          </view>
 </scroll-view>