preface

First take a look at the project screenshots

Business scenario: Sometimes in the project, the city will be selected according to the initial letter, or the address book name will be selected according to the initial letter, etc. If we follow the previous thinking, we need to judge the position of the scroll bar to slide to which place. Small procedures are officially availablescroll-into-viewProperty, can solve this scenario faster.

Attribute description provided by applets. Applets document

Code implementation

WXML code snippets

<scroll-view scroll-y scroll-into-view="{{intoview}}"> // Locate the existing first letter <view class="searchLetter"> <view wx:for="{{provinceList}}" wx:for-index="key" wx:for-item="value" wx:key="index" data-id="{{key}}" bindtap="scrollToSelect" >{{key}} </view> </view> <view class="selection" wx:for="{{provinceList}}" wx:key="key" </view> </scroll-view> </scroll-view>Copy the code

Pay attention to

  1. scroll-viewComponent needs to be setscroll-yScroll vertically.
  2. scroll-into-viewThe value of is the first letter selected, and the child element needs to be set to an attributeid(Key values are the first letters A, B, C, etc.).
  3. scrollToSelectThe method is used to click on a letter, herescroll-into-viewThe assignment.
  4. I stepped in a hole here,scroll-viewYou must set a fixed height, otherwise clicking the first letter will not work.

rendering

With the scrollin-view, it’s easy to select the first letter of the city. Take a look at the image.