微信小程序实现城市索引选择+搜索

1.实现效果

 2.实现原理

scroll-view：可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

1.为列表中的字母索引添加相应id，当触摸右侧固定侧边栏时候，动态设置当前id值，实现锚点定位。
2.搜索城市时，隐藏其他数据，根据搜索值去匹配（indexOf）去匹配关键字，将结果push到一个新的数组中，展示该数组数据。
3.catchtouchstart，catchtouchmove，catchtouchend，catchtouchcancel实现触摸滑动一系列过程。

 

1. 当触摸开始，移动时，拿到pageY，距离左上角的高度。
2. 当前选中位置高度Height=pageY-侧边栏本身距离左上角高度（res.windowWidth / 750 * 180     （rpx，该高度为top：180rpx））
3. 当前选中索引位置为Index=Math.floor(Height/(每一项字母的高度))
4. 每一项字母的高度=res.windowHeight- res.windowWidth / 750 * 300(300为侧边栏页面空余高度)/总共字母数

 3.主要代码

<view class="head {
  {search&&'r_head'}}">
  <!-- 搜索框 -->
  <view class="flex-row">
    <view class="head_input">
      <image src="/img/search_icon.png" class="search_icon"></image>
      <input type="text" placeholder="搜索" placeholder-class="place_holder" bindinput="getValue" value="{
  {search}}"></input>
    </view>
    <view class="sha_icon" catchtap="clear_input">取消</view>
  </view>
  <view class="flex-row head_curr" wx:if="{
  {!search}}&#