这两天做微信小程序,发现一个问题,就是我想要将多个view组件内容进行排版,经过查阅与个人总结最终有个答案。
其实最重要的就是: view的嵌套 以及 view的排列 。
首先我先讲一下view的排列,这块内容在微信文档里也有:view排列。
先给大家看一段代码:
display: flex;
flex-direction: row;
justify-content: flex-start;
在这里我们用 flex-direction: row 来进行view组件的排列方向,一共有一下几种:
1>row:从左到右的水平方向为主轴(默认值)
2>row-reverse:从右到左的水平方向为主轴
3>column:从上到下的垂直方向为主轴
4>column-reverse:从下到上的垂直方向为主轴
其中 justify-content有以下内容:
1>flex-start:主轴起点对齐(默认值)
2>flex-end:主轴结束点对齐
3>center:在主轴中居中对齐
4>space-between:两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等
5>space-around:每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同
看到这里你结合微信文档内容就会多个组件的排列。接下来是view的嵌套:
这也是最简单的,比如你需要这样显示
在这里你只需要;
<view class='view333'>
<view class='view3'>这里是健身</view>
<view class='view33'>
<view class='view4'>这里是跑步</view>
<view class='view5'>这里是骑行</view>
</view>
</view>
如果觉得不错的话点个赞再走吧!