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

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

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

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

// scroll-into-view 跳转到指定 id的 view元素的位置
<scroll-view scroll-y="true" class="scrolly" scroll-with-animation="true" :scroll-into-view="viewId">

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

  <view class="box-list" v-for="(item,idx) in cityList" :key="idx">
                   <view class="initial" :id="item.initial"> // 给每一个装开头字母的 view 绑定一个 ID
                       {{item.initial}}
                   </view>
                   <view class="city-name" v-for="(subItem,index) of item.list" :key="index">
                       {{subItem.name}}
                   </view>
               </view>
       </scroll-view>
   </view>
</template>

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%}

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

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

相关推荐

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