uni-app中scroll-view标签 跳转到指定的位置

这是一个城市选择的界面  下面是以字母开头的城市列表   

我要实现的功能 就是 点击右侧的字母跳转到指定的点击字母开头的城市

首先看到的这个显示的城市是封装在一个组件 我封装到了一个  暂且 A 组件里面

//  scroll-into-view  跳转到指定 id的 view元素的位置
        

         //  这里是的cityList是由父组件传来的城市的所有信息

            
                       //  给每一个 装  开头字母的 view 绑定一个 ID 
                        {{item.initial}}
                    
                    
                        {{subItem.name}}
                    
                
        
    

data() {
            return {
                viewId:''
            };
        },

然后右侧的字母 我也单独封装到一个 组件中 我就暂且叫B组件把

大概的逻辑就是  

B组件中 点击 其中的字母  将点击的字母传给  A组件中 viewId  

A组件中监听到 viewId 发生变化后  触发 A组件的 scroll-view 的组件跳转功能

这里我要说的坑有几个

1.:scroll-into-view="viewId"   这个必须是动态变化的   不能提前写死一个 他这个跳转到 是等到页面准备就绪后检测到变量变化了 就会跳转到指定的 id 的view元素位置 

2. 其实 scroll-view  一定要给一个 固定的高度 这个是必须的  否则跳转就不会成功了 

当然你也可以动态获取高度    注意不给高度是不会跳转成功的 

而且是不仅仅是 scroll-view 要给高度  他的父元素也要给高度 

就像我这个例子中

.scroll{height:100%}   .changeList:{height:100%}  

包括那个组件中要引入这个组件  引入组件的那个 父元素也要给一个高度 最好的