微信小程序scroll-into-view无效问题

小程序scroll-into-view踩坑

1. scroll-view组件中设置scroll-into-view属性（值设置为某子元素的id）可以实现滑动到该子元素的位置，scroll-into-view必须动态赋值
2. scroll-y/scroll-x: true
3. scroll-with-animation: true
4. 滚动区域的高度设置成具体值（px），不能是%

示例：
带字母索引的城市列表的实现

<block wx:if="{{$taroCompReady}}">
    <view class="city_container">
        <view class="title">城市选择</view>
        <view class="cityContainer">
            <scroll-view scroll-y="{{true}}" scroll-with-animation="{{true}}" scroll-top="{{10}}" scroll-into-view="{{selectedLetter}}" class="scrollView">
                <view wx:key="letter" class="letter_city" id="{{item.letter}}" wx:for="{{cities}}" wx:for-item="item" wx:for-index="_anonIdx4">
                    <-- 子元素的id可设为首字母 -->
                    <view class="letter">{{item.letter}}</view>
                    <view class="cities">
                        <view class="city" wx:key="cityName" wx:for="{{item.data}}" wx:for-item="ele" wx:for-index="_anonIdx2">{{ele.cityName}}</view>
                    </view>
                </view>
            </scroll-view>
            <view class="right">
            	<-- 点击字母列表时，把被点中的字母赋值给scroll-into-view -->
                <view wx:key="$original" bindtap="anonymousFunc0" wx:for="{{loopArray88}}" wx:for-item="item" wx:for-index="__index0" data-e-tap-so="this" data-e-tap-a-a="{{item._$indexKey}}">{{item.$original}}</view>
            </view>
            <block wx:if="{{selectedLetter}}">
                <view class="selected_letter">{{selectedLetter}}</view>
            </block>
        </view>
    </view>
</block>

scroll-view组件中设置scroll-into-view属性（值设置为某子元素的id）可以实现滑动到该子元素的位置，scroll-into-view必须动态赋值，另外需要加上scroll-y/scroll-x、scroll-with-animation两个属性，以及滚动区域的高度设置成具体值才能滚动。
css

.city_container {
  color: #333;
  font-size: 14Px;
  position: relative; 
}

.city_container .cityContainer .scrollView {
  width: 100%;
  height: 484Px;  // 滚动区域的高度，必须设置成具体值，不能写成%
}
.city_container .cityContainer .letter_city {
  background: #eee;
  border-bottom: 1Px #ccc solid; 
}
.city_container .cityContainer .letter_city .letter {
  padding: 0 20Px;
  font-size: 12Px;
  color: #666; 
}
.city_container .cityContainer .letter_city .cities {
  background: #ffffff;
  padding: 0 20Px;
  border-bottom: 1Px #ccc solid; 
}
.city_container .cityContainer .letter_city .cities .city {
  font-size: 14Px;
  line-height: 30Px;
  height: 30Px;
  border-bottom: 1Px #eee solid;
}
.city_container .cityContainer .right {
  width: 20Px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10Px;
  text-align: center;
  color: #666; 
}
.city_container .cityContainer .selected_letter {
  position: fixed;
  width: 15vw;
  height: 10vh;
  top: 40vh;
  left: 45vw;
  line-height: 10vh;
  text-align: center;
  background: rgba(0, 0, 0, 0.2); 
}