小程式中scroll-view元件實現效果之--------城市列表頁的索引(scroll-into-view)
阿新 • • 發佈:2018-12-14
想要實現的功能是在一個城市列表頁實現字母索引 點選字母跳轉到相應的位置,在小程式裡面利用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-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>