scroll-view 怎么配置上下层
时间: 2023-10-18 08:19:40 浏览: 38
要在 scroll-view 中配置上下层布局,需要在 scroll-view 中添加一个容器 view,并将上下两个子元素分别放在容器 view 中的不同位置。具体的实现方式如下:
1. 在 scroll-view 中添加一个容器 view,并设置容器 view 的高度大于 scroll-view 的高度;
2. 将上层元素放在容器 view 的顶部,下层元素放在容器 view 的底部;
3. 设置 scroll-view 的 overflow 属性为 scroll,这样就可以通过滚动来查看上下两层元素了。
示例代码如下:
```html
<scroll-view style="height: 100%">
<view style="height: 200%">
<view style="position: absolute; top: 0; left: 0; right: 0;">上层元素</view>
<view style="position: absolute; bottom: 0; left: 0; right: 0;">下层元素</view>
</view>
</scroll-view>
```
需要注意的是,由于上下两个元素都是绝对定位,因此需要设置容器 view 的高度大于 scroll-view 的高度,以确保容器 view 能够包含上下两个元素。
相关问题
支付宝小程序外层scroll-view怎么控制内层scroll-view滚动
支付宝小程序中,外层scroll-view控制内层scroll-view滚动的方法如下:
1. 在外层scroll-view的wxml文件中,设置scroll-view的属性direction为vertical,表示垂直滚动。
```html
<scroll-view scroll-y="{{true}}" style="height: 100vh;">
<!-- 内层scroll-view的内容 -->
</scroll-view>
```
2. 在内层scroll-view的wxml文件中,设置scroll-view的属性direction为horizontal,表示水平滚动。
```html
<scroll-view scroll-x="{{true}}" style="white-space: nowrap;">
<!-- 内层scroll-view的内容 -->
</scroll-view>
```
这样,外层scroll-view就可以控制内层scroll-view的滚动了。
scroll-view scroll-y
scroll-view组件中的属性scroll-y是用来开启纵向滚动功能的。当将scroll-y设定为true时,scroll-view组件就可以在纵向上滚动。要开启纵向滚动功能,需要给scroll-view设置一个高度,并且内容的高度要大于scroll-view的高度才能体现出滚动功能。如果内容的高度小于scroll-view的高度,就无法滚动。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [uniapp scroll-view基础用法](https://blog.csdn.net/lxgyydsgod/article/details/126212359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)