(三)微信小程序之容器组件view实现水平和纵向布局
2017-01-06 22:41
1116 查看
项目中最常用的两种布局方式,水平布局和垂直布局,在微信小程序中实现起来也比较简单。
1.横向水平布局:
实现水平布局,需要四个view容器组件,其中一个是父容器。如下:
在三个自容器view中,设置一个高度,不设置宽度,将flex设置为1,意思是评分屏幕宽度,以便得到三个同等宽度。当然您也可以设置他的宽度,比如我设置如下:
效果就是每个宽度占50px,同样实现横向水平布局。效果如下:
而当我将box1设置为固定宽度50px,而box2,box3不设置宽
度而直接设置flex:1,代码如下:
2.纵向垂直布局:
纵向布局实现跟横向布局相似,但是需要把布局方式改为纵向列式的,假如需要将每个box的宽度设置为flex:1等自适应布局的话,需要给父容器一个高度,否则子容器的高度只会显示为刚好能包裹文字的告诉。当然您也可以设置每个box的高度。这里我选择自适应,所以给父容器一个600px的高度,让里面的三个box平分他的高度。代码如下:
效果如下:
我们可以使用以上所述的方式实现更多灵活的布局。
1.横向水平布局:
实现水平布局,需要四个view容器组件,其中一个是父容器。如下:
<!--index.wxml--> <view class="content"> <view style="flex:1;height:100px;background-color:green">box1</view> <view style="flex:1;height:100px;background-color:blue">box2</view> <view style="flex:1;height:100px;background-color:yellow">box3</view> </view>给父容器以下样式:
/**index.wxss**/ .content{ display: flex; flex-direction: row; }其中display:flex将view设置为弹性布局,flex-direction: row;设置布局的方向是横向水平布局。
在三个自容器view中,设置一个高度,不设置宽度,将flex设置为1,意思是评分屏幕宽度,以便得到三个同等宽度。当然您也可以设置他的宽度,比如我设置如下:
<view class="content"> <view style="width:50px;height:100px;background-color:green">box1</view> <view style="width:50px;;height:100px;background-color:blue">box2</view> <view style="width:50px;;height:100px;background-color:yellow">box3</view> </view>
效果就是每个宽度占50px,同样实现横向水平布局。效果如下:
而当我将box1设置为固定宽度50px,而box2,box3不设置宽
度而直接设置flex:1,代码如下:
<!--index.wxml--> <view class="content"> <view style="width:50px;height:100px;background-color:green">box1</view> <view style="flex:1;height:100px;background-color:blue">box2</view> <view style="flex:1;height:100px;background-color:yellow">box3</view> </view>效果将会是box1占了他该有的50px的宽度之后,剩下的整个屏幕的宽度由box2和box3平分。效果如下:
2.纵向垂直布局:
纵向布局实现跟横向布局相似,但是需要把布局方式改为纵向列式的,假如需要将每个box的宽度设置为flex:1等自适应布局的话,需要给父容器一个高度,否则子容器的高度只会显示为刚好能包裹文字的告诉。当然您也可以设置每个box的高度。这里我选择自适应,所以给父容器一个600px的高度,让里面的三个box平分他的高度。代码如下:
/**index.wxss**/ .content{ height: 600px; display: flex; flex-direction: column; }
<!--index.wxml--> <view class="content"> <view style="flex:1;width:100%;background-color:green">box1</view> <view style="flex:1;width:100%;background-color:blue">box2</view> <view style="flex:1;width:100%;background-color:yellow">box3</view> </view>
效果如下:
我们可以使用以上所述的方式实现更多灵活的布局。
相关文章推荐
- 微信小程序开发之webview组件内网页实现微信原生支付
- 微信小程序scroll-view组件实现滚动动画
- 微信小程序组件解读和分析:一、view(视图容器 )
- 微信小程序例子——如何使用scroll-view组件实现视图垂直滚动
- 微信小程序 scroll-view组件实现列表页实例代码
- 如何在 React Native 实现类微信小程序平台:WebView 调用原生组件
- 微信小程序 教程之wxapp 视图容器 view
- 安卓程序代写 网上程序代写[原]ViewGroup(容器组件)详解(API解析)
- 微信小程序(九)scroll-view组件详细介绍
- 微信小程序 (八)View组件详细介绍
- 微信小程序例子——使用progress组件实现读取进度效果
- 第十篇、微信小程序-view组件
- Android开发中自定义View设定到FrameLayout布局中实现多组件显示
- 自定义ViewGroup实现水平布局空间不足自动换行的效果
- 微信小程序例子——使用text组件实现转义符换行
- [转]HorizontalScrollView介绍--支持水平滚动的android布局容器
- 微信小程序例子——使用input组件实现密码框
- Andriod中textview垂直水平居中及LinearLayout内组件的垂直布局
- 微信小程序-view组件