小程序进行其他操作导致scroll-view回到顶部的问题

2,179 阅读1分钟

背景: 我的小程序页面有一个列表。列表的顶部有一个tab标签切换。这个tab切换会有两屏的时候。然后有的tab会有二级菜单。

image.png
页面样式。

image.png
二级菜单。

问题
在点击第二屏的tab item(特别是含有二级菜单的那一项)时 scroll-view会有回到第一屏的问题。

我的列表是用了scroll-view嵌套的,为了利用scroll-into-view实现回到顶部功能和一些其他的功能。 顶部的tab也是用的scroll-view嵌套的。
二级菜单的显示隐藏使用的是v-if的条件渲染。
主要的原因就是
scroll-view 中使用条件渲染,切换 v-if 的布尔值时会导致scroll-view重新渲染,会使scroll-view的滚动条回到顶部。

所以,我的对应解决办法就是:
方式一:不使用条件渲染。但是我的二级菜单必须要用。所以这个方式不行。
方法二:使用普通的 view 组件代替scroll-view。结构大概如下:
html

<view class="tab_wrap">
    <view class="tab_list">
        <view class="tab_item" v-for="item of tabs" :key="item.id">
        <view/>
    <view/>
<view/>

css

.tab_wrap{设置固定宽度,背景等样式}
  .tab_list{overfolw:auto;//是否超出后可以滚动 white-space: nowrap;//超出后不换行。}
  //这个时候可以给.tab_list加伪类 隐藏默认比较丑的滚动条样式。
 .tab_item{display: inline-block;}
 //当然上面也可以用flex布局写。

小程序隐藏滚动条的方式:

.tab_list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    color: transparent !important;
    display: none !important;
 }