小程序实践（六）：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结构,然后再设置各种事件即可,这种组件有一个特点: ...
随机推荐
- 和我一起熟悉caffe2
caffe2 是一个深度学习架构,它提供了一种简易快速的方法为让你能否迅速接触深度学习并能为社区贡献新的算法和模型．你可以把作品部署到有很强计算能力的GPU上,也可以把作品部署到有caffe2交叉编译 ...
- HP服务器设置iLO
HP服务器设置iLO步凑 1.开机出现界面—按下F11进入Boot Menu: 2.选择Generic USB Boot回车: 3.选择System Configuration回车: 4.选择iLO ...
- Spring系列之DI的原理及手动实现
目录 Spring系列之IOC的原理及手动实现 Spring系列之DI的原理及手动实现 前言 在上一章中,我们介绍和简单实现了容器的部分功能,但是这里还留下了很多的问题.比如我们在构造bean实例的时 ...
- 搭建 MobileNet-SSD 开发环境并使用 VOC 数据集训练 TensorFlow 模型
原文地址:搭建 MobileNet-SSD 开发环境并使用 VOC 数据集训练 TensorFlow 模型 0x00 环境 OS: Ubuntu 1810 x64 Anaconda: 4.6.12 P ...
- Jenkins构建部署Maven项目
1 创建新项目 2 构建maven项目 3 配置 3.1 源代码管理 svn 用户名,密码 4 配置maven打包 配置SSH 保存之后 立即构建 执行成功
- SpringBoot(5) SpringBoot个性化启动
1.在类路径下增加一个banner.txt,里面是启动要输出的信息 自定义banner在线生成工具: http://www.bootschool.net/ascii _ _ _ _ __ | | __ ...
- Perl的do语句块结构
do语句块结构如下: do {...} do语句块像是匿名子程序一样,没有名称,给定一个语句块,直接执行.且和子程序一样,do语句块的返回值都是最后一个执行的语句的返回值. 例如,将使用if-elsi ...
- java开发各层对象含义
综述 java的几种对象(PO,VO,DAO,BO,POJO)解释: 一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中 ...
- html中的Session
采用setItem()方法存储 sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值sessionStorage.getItem('t ...
- WPF 实现ScrollViewer的垂直偏移滚动跳转
问题:考虑屏幕大小,一般都是会在表单问卷的页面使用ScrollViewer.问卷中问题漏填漏选时,在提交时校验不过,需要滚动跳转至漏填漏选项. 页面如下: 每个选项使用StackPanel,并对复选框 ...