小程序实践（六）：view内部组件排版
涉及知识点：
1、垂直排列，水平排列
2、居中对齐
示例：
1、默认排版 ， 一个父组件里面两个子view
显示效果:
2、先给父view设置一个高度和颜色值，用于看效果
3、实现水平排列和垂直排列的样式
水平排列：
------> 
垂直排列（不进行设置，默认垂直排列）：
------>
4、实现居中效果
居中效果分为两种情况，依赖于3中的水平排列还是垂直排列。
①、当水平排列的时候 ， justify-content:center ; 决定水平居中
------------------------> 
②、当水平排列的时候，align-items:center; 决定垂直居中
------------------------> 
③、当垂直排列的时候，justify-content:center; 决定垂直居中
------------------------> 
④、当垂直排列的时候，align-items:center; 决定水平居中
------------------------>
⑤、当 align-items:center; 和 justify-content:center; 都存在的时候，不管父view怎么设置的排列方向，他的子view都是水平垂直都居中
------------------------>
--------------------------------------------------------------------------------------
小程序实践（六）：view内部组件排版的更多相关文章
- 小程序实践（二）：swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
- 小程序实践（十一）：showModal的使用
显示模态对话框,确定和取消两个选择+标题+内容的对话框 . // 编辑用户性别 tapSex:function(res){ var that = this wx.showModal({ title: ...
- 小程序实践（十）：textarea实现简单的编辑文本界面
textarea是官方的原生组件,用于多行输入 简单的例子,监听文本内容.长度,以及设置最大可输入文本长度 wxml <view class='textarea-Style'> <t ...
- 小程序实践（五）：for循环绑定item的点击事件
微信展示列表效果借助于 wx:for 简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的 ...
- 小程序实践（三）：九宫格实现及item跳转
效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间. --------------------------------------------------------------- ...
- 小程序实践（一）：主页tab选项实现
官方文档 效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改 如图: ----------------------------------------------------- ...
- 小程序之如和使用view内部组件来进行页面的排版功能
这篇文章主要介绍了关于小程序之如和使用view内部组件来进行页面的排版功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1 ...
- 微信小程序学习笔记四 自定义组件
1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...
- 微信小程序开发03-这是一个组件
编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
随机推荐
- 使用SAX解析xml文档
1.首先,在main方法中解析xml文档,具体代码如下: import org.w3c.dom.*; import javax.xml.parsers.DocumentBuilder; import ...
- TypeError: Cannot red property 'style' of null 错误解决
错误信息如下: JSP代码如下: <c:if test ="${not empty excelErrors}"> <div id="excelError ...
- mysql 开发基础系列12 选择合适的数据类型(上)
一. char 与varchar比较 在上图的最后一行的值只适用在"非严格模式",关于严格模式后面讲到.在“开发基础系列4“ 中讲到CHAR 列删除了尾部的空格.由于char是固定 ...
- Angular2入门：TypeScript的模块
一.export 二.import 三.模块的默认导出
- Python 的 setitem、getitem、delitem 特殊方法使用
简介 setitem:当属性被以索引方式赋值的时候会调用该方法 getitem:一般如果想使用索引访问元素时,就可以在类中定义这个方法 delitem:当使用索引删除属性时调用该方法 实例 __Aut ...
- maven安装、配置及创建工程
准备工作 java开发环境(JDK) maven下载地址:http://maven.apache.org/release-notes-all.html 一.安装 安装maven超级简单,总共分三步: ...
- javascript小实例，编写一个方法，实现从n-m个数中随机选出一个整数
别怪我是一个闷葫芦,没那么多花哨的语言,废话不多说,先说说小实例的要求: 编写一个方法,实现从n-m个数中随机选出一个整数,要求:传递的参数不足两个或者不是有效数字,返回[0-1]之间的随机数,需要解 ...
- SET NOCOUNT { ON | OFF }
当 SET NOCOUNT 为 ON 时,不返回计数(表示受 Transact-SQL 语句影响的行数) SET NOCOUNT 为 ON 时,也更新 @@ROWCOUNT 函数. 当 SET NOC ...
- Linux服务器评测脚本 中文IO脚本简单易懂
中文版: wget -N --no-check-certificate https://raw.githubusercontent.com/FunctionClub/ZBench/master/ZBe ...
- mysql存储过程调用含out参数
mysql 数据库有以下存储过程: CREATE DEFINER=`root`@`localhost` PROCEDURE `hovertreeTest`( IN `Param1` INT, ), O ...