关于uniapp使用srcoll-view视图是横向及纵向滚动

        今天在用HBuilder X写uniapp项目时遇到了需要使用滚动视图的地方,为了简单省事自然就选择了srcoll-view这个标签。在写完后实验了一下,微信小程序时没有问题,但是h5页面却出问题了。

        问题大致分为两类:横向、纵向

        共有的问题有:给scroll-view加上class类名并设置弹性布局后发现不起作用,经过排查和浏览器查看视图结构发现,h5页面中的scroll-view标签内自动嵌套了三层uni-view结构,如下图:

关于uniapp使用srcoll-view视图是横向及纵向滚动_第1张图片

        因此直接给scroll-view的类名中设置弹性布局是不行的,需要写成下面的这样:

/* h5的scroll-view滚动容器内元素样式 */
/deep/.uni-scroll-view-content{
    display: flex;
	flex-direction: column;
}

 在设置滚动时,需参考下图

 

         横向时需设置滚动视图容器的宽度,并设置white-space: nowrap;其目的是在内部元素的总宽度超过容器时禁止换行,使其在一行上显示。

        纵向时则需要设置滚动视图容器的高度,不需要禁止换行。但值得注意的是在设置聚堆定位的时候(absolute和fixed)可能会造成出现滚动条但是无法滚动的,但去除绝对定位后又可以的情况。

        我上网查询时发现横向滚动的文章比较多,但纵向的寥寥无几,且对纵向滚动的解决办法都是设置高度,但这明显不行。后来经过试验发现问题所在。

        由于绝对定位后视图组件会脱离当前的文本流,在没有指定具体层级的情况下,导致滚动元素也没固定(个人猜想)。于是我在设定scroll-view的层级后即可保证在绝对定位的情况下还可以滚动。

        以上是我在写代码的过程中遇到的问题及解决办法,如果有不同的看法的欢迎交流,大家一起进步。

你可能感兴趣的:(uni-app,微信小程序,小程序)