微信小程序|scroll-view组件

算法与编程之美

发布于 2020-03-13 11:30:06

1.4K0

发布于 2020-03-13 11:30:06

文章被收录于专栏：算法与编程之美

问题描述

小程序的视图容器组件分为五个组件，分别是view组件、scroll-view组件、swiper组件、movable组件与cover组件，如图2.1。这里介绍scroll-view组件的用法。

解决方案

Scroll-view是负责可滚动视图区域的一个组件，称为滚动视图。当在一个屏幕的像素显示不下绘制的UI控件时，可以采用滑动的方式，使控件显示。他支持的属性较多，更多见官方文档

这里演示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时，一定要给他一个固定的高度。