小程序scroll-into-view踩坑
- scroll-view组件中设置scroll-into-view属性(值设置为某子元素的id)可以实现滑动到该子元素的位置,scroll-into-view必须动态赋值
- scroll-y/scroll-x: true
- scroll-with-animation: true
- 滚动区域的高度设置成具体值(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);
}