背景: 我的小程序页面有一个列表。列表的顶部有一个tab标签切换。这个tab切换会有两屏的时候。然后有的tab会有二级菜单。
页面样式。
二级菜单。
问题:
在点击第二屏的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;
}