小程序的视图容器组件分为五个组件,分别是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 这是纵、横向演示效果图。 在学习组件的过程中,发现还有很多需要去实践的东西,有待于我们更深一层的思考。
实习编辑 | 王楠岚 责 编 | 赵 微
|