类似某团app搜索城市界面中 点击右侧城市首字母，对应城市区域置顶的功能(uniapp)

功能类似：某团app上面，跳转到搜索城市界面，点击右侧城市首字母，然后对应城市区域置顶的效果。

主要用到底组件：<scroll-view> , 然后里面有个要用到的属性： scroll-into-view (这个值应为某子元素id。设置哪个方向可滚动，则在哪个方向滚动。)

           一定不要忘记给组件设置高度喔！！！

见代码：

//html 界面
<template>
  <view class="search-city-container">
      <scroll-view :scroll-into-view="scrollIntoView" scroll-y="true" class="scroll-view" 
         scroll-with-animation="true" :style="{'height':windowHeight+'px'}">
          //假设：这里放搜索的input框
         <view class="search-input"></view>
      
         <view class="recent-visit"></view> //这里可以放 定位/最近访问 的数据
         //这里放所有城市的数据
         <view  class="city-container">
              <view class="city-detail" v-for="(item,index) in list" :key="index" 
                 :id="item.首字母字段值"> //重点是这里的id值哦！！！
                  
                  ...这里再根据返回的数据具体排版即可
              </view>
         </view> 
         
      </scroll-view> 
      //这里可以排版右侧定位首字母的位置
      <view class="letters">
           <view class="letter-detail" @click="handleLetters(item,index)" v-for="(item,index) in list" 
              :key="index" :class="index==defaultIndex?'current':''">{{item.大写首字母}}</view>
      </view>
  </view>

</template>
<script>
   export default{
      data(){
        return{
           defalutIndex:0,//默认值
           scrollIntoView:'A',//设个默认值
           id:'A',//
           windowHeight:'',//
        }
      },
      onLoad(){
           let that = this;
           uni.getSystemInfo({
               success:function(res){
                  that.windowHeight = res.windowHeight;
               }
           })
      },
      methods:{
          //点击右侧定位的首字母触发事件
          handleLetters(item,index){
             this.defaultIndex = index;
             this.scrollIntoView = item.首字母;  //这里赋值scrollIntoView的值。
          },
          //搜索城市触发事件
          searchInput(e){
　　　　　　　 let val = e.detail.value;
             let allcity = [...xxxx];//假设这里有很多城市的数据
             let selectedCity = [];
             for(let i=0;i<allcity.length;i++){
                 if(allcity[i].match(new RegExp("("+val+")"),"ig")){
                     selectedCity.push(allcity[1]);
                 }
             }
             this.selectedCity = selectedCity;//搜索城市，匹配所有城市里面的关键字
          }
      }
   }
</script>