微信小程序设置控件权重
项目中最常用的两种布局方式,水平布局和垂直布局,在微信小程序中实现起来也比较简单。
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>
我们可以使用以上所述的方式实现更多灵活的布局。
微信小程序设置控件权重的更多相关文章
- 微信小程序地图控件篇 ---自定义图标被地图覆盖的问题
今天在做微信小程序的时候遇到这个这样的问题 需要在地图上加个一个自定义的图标控件 类似这样的 刚开始的时候怎图片一直会被地图组件覆盖 ,要怎么解决这个问题 我去翻了下小程序的文档 有个cover ...
- 微信小程序常用控件汇总
1.图片标签: <image src="/images/aaa.png"></image> 2.文本标签: <text>Hello</te ...
- 微信小程序 Button控件 点击传值给JavaScript
直接看例子吧: WXML:直接看Button,用“data-”(data-total)传值,后台如何获取,继续看下面JS代码. <view class="infothird" ...
- 微信小程序设置web-view的业务域名
微信小程序设置web-view的业务域名 域名必备 你的域名必须要备案过 你的域名必须是https,而不能是http web-view 在小程序后台添加业务域名,只解析业务域名中的url网页地址的. ...
- 微信小程序设置全局字体
微信小程序设置全局css,需要在app.wxss文件中设置page的样式 page { font-family:"PingFangSC-Thin"; font-size:32rpx ...
- 基于 mpvue 框架的小程序选择控件,支持单列,多列,联动
最近在学着写mpvue小程序,在做选择控件时候遇到了点问题,按照微信小程序方法picker,很不方便! 在网上搜到一个很好用的组件下面给大家分享: 组件说明文档链接:https://go.ctolib ...
- 微信小程序设置底部导航栏目方法
微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了 ...
- 微信小程序设置滚动条
前言 又很久没有写东西了,上周开始将一个APP和一个网站的内容整合到微信小程序中,到这会儿终于搞得快结束了,才发现为啥我的小程序滚动视图没有滚动条,这是闹哪样,没有滚动条的滚动是没有灵魂的. 客官可移 ...
- 微信小程序设置全局变量
为了提高程序的可用性我们在做项目的时候一定要设置全局变量 微信小程序里面有个app.js,我们可以在这个里面设置全局变量, globalData:{ userInfo:null, test:" ...
随机推荐
- C#图解教程学习笔记——接口
一.接口概念接口是指定一组函数成员而不实现它们的引用类型.所以只能类和结构来实现接口. 二.声明接口1. 接口声明不能包含:数据成员.静态成员,只能包含以下类型的非静态成员函数:方法.属性.事件.索引 ...
- tkinter Scale滑块
鼠标拖动和绑定鼠标滚轮移动: import threading from tkinter import * root = Tk() v = StringVar() s1 = Scale(root,fr ...
- 只用一次循环开销 将类似 1 A 、1 B 的数据返回成为 1 A,B 的拼接形式
/// <summary> ///将类似 1 A .1 B 的数据返回成为 1 A,B 的拼接形式 /// </summary> /// <param name=&quo ...
- ngrx/store effects 使用总结2:列表展示
第一个计数器案例:http://www.cnblogs.com/axel10/p/8589122.html 完成了计数器案例后,现在开始比较能够完整的展示angular2+开发流程的案例:在线获取用户 ...
- luogu P1214 [USACO1.4]等差数列 Arithmetic Progressions
题目描述 一个等差数列是一个能表示成a, a+b, a+2b,..., a+nb (n=0,1,2,3,...)的数列. 在这个问题中a是一个非负的整数,b是正整数.写一个程序来找出在双平方数集合(双 ...
- bzoj 5123: [Lydsy1712月赛]线段树的匹配
设f[0/1][x]为区间[1,x]的根向下 不选(0)或者选(1) 的dp pair<最优值,方案数>. 可以很容易的发现总状态数就是log级别的,因为2*n 与 (2*n+1 或者 ...
- Css 基础学习
css 基本选择器 css基本选择器有三种方法 第一种: class选择器 .c1{ color: red;} <div class='c1'>hello world</div> ...
- 开篇有益:为什么选择MongoDB?
为啥用MongoDB? 赶NoSQL时髦? Auto-shard等激动人心的特性? •No! 08年,还都是浮云. 最初的想法是寻找一个可靠的分布式K/V解决MySQL的问题. NoSQL(NoSQL ...
- web.xml文件的 xsd引用(或dtd引用)学习
1. 为什么web.xml会有不同版本的xsd引用: JDK依赖变化: 或 servlet(JAVA EE)自身API的改变: 2. 为什么会有dtd和xsd两个版本的区别 我是在这篇文章中看到的,作 ...
- MFC中 日期字符串的转换
一.将字符串2011-08-1800:00:00转换为字符串2011-8-18,通过以下的函数 CString DataDeleteZero(CString DATA) { CStringstrmon ...