本文共 1293 字，大约阅读时间需要 4 分钟。
欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
小程序的视图容器组件分为五个组件，分别是view组件、scroll-view组件、swiper组件、movable组件与cover组件，如图2.1。这里介绍scroll-view组件的用法。
解决方案
Scroll-view是负责可滚动视图区域的一个组件，称为滚动视图。当在一个屏幕的像素显示不下绘制的UI控件时，可以采用滑动的方式，使控件显示。他支持的属性较多，更多见官方文档
图2.1
图2.2
这里演示scroll-x与scroll-y属性：
<scroll-view scroll-y="true" style="height:200px"> <view style="background:black;width:100px;height:100px"></view> <view style="background:green;width:100px;height:100px"></view> <view style="background:pink;width:100px;height:100px"></view> </scroll-view>
|
这里是纵向滚动的演示代码。
<scroll-view scroll-x="true" style="white-space:nowrap;display:flex"> <view style="background:black;width:100px;height:100px;display:inline-block"></view> <view style="background:green;width:100px;height:100px;display:inline-block"></view> <view style="background:pink;width:100px;height:100px;display:inline-block"></view> <view style="background:white;width:100px;height:100px;display:inline-block"></view> <view style="background:grey;width:100px;height:100px;display:inline-block"></view>
</scroll-view> |
这里是横向滚动的演示代码。
其中scroll-y=”true”表示允许纵向滚动。在定义scroll-view时，一定要给他一个固定的高度。
图2.3
这是纵、横向演示效果图。
在学习组件的过程中，发现还有很多需要去实践的东西，有待于我们更深一层的思考。
END
实习编辑 | 王楠岚
责 编 | 赵 微
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！
转载地址：https://where2go.blog.csdn.net/article/details/104708207 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
