项目中最常用的两种布局方式,水平布局和垂直布局,在微信小程序中实现起来也比较简单。

      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>

我们可以使用以上所述的方式实现更多灵活的布局。

微信小程序设置控件权重的更多相关文章

  1. 微信小程序地图控件篇 ---自定义图标被地图覆盖的问题

    今天在做微信小程序的时候遇到这个这样的问题  需要在地图上加个一个自定义的图标控件 类似这样的 刚开始的时候怎图片一直会被地图组件覆盖  ,要怎么解决这个问题  我去翻了下小程序的文档 有个cover ...

  2. 微信小程序常用控件汇总

    1.图片标签: <image src="/images/aaa.png"></image> 2.文本标签: <text>Hello</te ...

  3. 微信小程序 Button控件 点击传值给JavaScript

    直接看例子吧: WXML:直接看Button,用“data-”(data-total)传值,后台如何获取,继续看下面JS代码. <view class="infothird" ...

  4. 微信小程序设置web-view的业务域名

    微信小程序设置web-view的业务域名 域名必备 你的域名必须要备案过 你的域名必须是https,而不能是http web-view 在小程序后台添加业务域名,只解析业务域名中的url网页地址的. ...

  5. 微信小程序设置全局字体

    微信小程序设置全局css,需要在app.wxss文件中设置page的样式 page { font-family:"PingFangSC-Thin"; font-size:32rpx ...

  6. 基于 mpvue 框架的小程序选择控件,支持单列,多列,联动

    最近在学着写mpvue小程序,在做选择控件时候遇到了点问题,按照微信小程序方法picker,很不方便! 在网上搜到一个很好用的组件下面给大家分享: 组件说明文档链接:https://go.ctolib ...

  7. 微信小程序设置底部导航栏目方法

    微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了 ...

  8. 微信小程序设置滚动条

    前言 又很久没有写东西了,上周开始将一个APP和一个网站的内容整合到微信小程序中,到这会儿终于搞得快结束了,才发现为啥我的小程序滚动视图没有滚动条,这是闹哪样,没有滚动条的滚动是没有灵魂的. 客官可移 ...

  9. 微信小程序设置全局变量

    为了提高程序的可用性我们在做项目的时候一定要设置全局变量 微信小程序里面有个app.js,我们可以在这个里面设置全局变量, globalData:{ userInfo:null, test:" ...

随机推荐

  1. s 中日期 转换成时间戳 例如2013-08-30 转换为时间戳

    以前遇到过一个关于时间戳的问题,为了不被大家鄙视,先说一下概念. 具体时间戳怎么定义的我也不清楚,但百度百科中有这么一句:“时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)至当前时 ...

  2. 用Gson解析没有数据头的纯数组json字符串

    无数据头Json字符串 Json字符串只有数组,而次数组没有名字,如下 [ { "name": "zhangsan", "age": &qu ...

  3. weblogic10.3.6忘记用户名或者密码的解决方法

    weblogic安装后,忘记访问控制台的用户名或者密码,可通过以下步骤来重置用户名密码. 版本:WebLogic Server 10.3 说明:%DOMAIN_HOME%:指WebLogic Serv ...

  4. Java NIO.2 使用Path接口来监听文件、文件夹变化

    Java7对NIO进行了大的改进,新增了许多功能: 对文件系统的访问提供了全面的支持 提供了基于异步Channel的IO 这些新增的IO功能简称为 NIO.2,依然在java.nio包下. 早期的Ja ...

  5. UIView和UIImageView 旋转消除锯齿方法

    方法一: calendarImageView_ =[[UIImageView alloc] initWithFrame:CGRectMake(3,3,60,72)];     calendarImag ...

  6. const的限定

    const对象一旦创建后,其值就不可以改变,所以const对象必须初始化.与非const的类型比较,主要区别在于const类型对象执行但是不改变其操作内容. 在默认状态下,const只在文件内有效.在 ...

  7. HDU1087上升子序列的最大和

     解法一 此题是一个简单的动态规划问题,用dp[i]记做最后一步经过第i个数所得到的最大sum值,则结果=max(dp[i]),i=1,...n.考虑dp[i]的前一步会经过那里?假设dp[i]的前一 ...

  8. TortoiseGit在github上创建工程

    一.前期准备 TortoiseGit官网下载地址:http://code.google.com/p/tortoisegit/ git下载地址:https://git-scm.com/download/ ...

  9. 2017.2.21 Java中正则表达式的学习及示例

    学习网站:菜鸟教程 http://www.runoob.com/java/java-regular-expressions.html 1 正则表达式的基本使用 (1)类 正则表达式并不仅限于某一种语言 ...

  10. 【BIEE】数据透视表格第一列添加序号

    现在有这么一个需求,需要在数据透视图的表格前面条件一列序号,作为行号,如下图: 那么实现这个如何实现呢? 只需要在BIEE分析编辑界面,新建一列,然后公式定义为:RCOUNT(RSUM(1)) ,保存 ...