小程序实践（六）：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结构,然后再设置各种事件即可,这种组件有一个特点: ...
随机推荐
- spring boot整合 springmvc+mybatis
需要以下依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId&g ...
- tensorflow 迭代周期长，每个epoch时间变慢
理论上,session启动后,每个epoch训练时间应该是差不多,而且不会因为迭代周期变长,epoch时间变慢.原因是session里定义了tf.op导致的,每一次迭代都会在graph里增加新的节点, ...
- 深入Vue2.x的虚拟DOM diff原理
一.前言 Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),关于双向绑定可以参阅木琴的文章<剖析Vue原理&实现双向绑定MVVM>,vdom是树状结构,其节点为vnod ...
- 利用vi编辑器创建和编辑正文文件（二）
末行模式下的命令 1. w:写文件,将编辑的内容保存到文件系统. 2. w!:如果只读文件,强制写入系统. 3. q!:退出vi,但文件内容修改的话,系统要提示是否 ...
- iReport 5.6.0 启动闪退的问题 解决方案
问题描述 本人使用的Windows版本的 iReport 5.6.0,安装成功后,双击桌面上的iReport-5.6.0图标,出现了闪退,无法正常启动的现象.现象如下: 问题原因 iReport 5. ...
- Android利用Intent与其他应用交互
前言: 上一篇博客给大家聊了Intent的定义,分类.属性和功能,相信大家对于Intent在Android中的作用已经清楚,这一篇博客将会给大家聊Intent的用法. Android系统的一个重要特性 ...
- PYTHON 中 SQL 带参数
使用 PYTHON 的字符串填充方式 import mysql.connector sql = 'select \* from school.student where age > {age} ...
- 数据读取（SQL）与文本写入（fileStream）
要求:从三个不同服务器中取数,对最近10的历史数据进行去重,写出到文本. 1.读取. public static DataTable ExecuteSql(string connectString, ...
- Ubuntu 安装网卡驱动
搭建Linux平台的无线热点,需要无线网卡和驱动都要支持 AP. 试了下Ubuntu平台默认驱动并不支持AP模式,所以需要更换驱动,具体操作步骤如下: 1.找到自己网卡芯片的型号,由于我的环境是搭建在 ...
- Python 通过 SMTP 发送邮件
Python版本:Python3.5.2 简介 SMTP是发送邮件的协议,Python 内置对 SMTP 的支持,可以发送纯文本邮件.HTML 邮件以及带附件的邮件. Python 对 SMTP 支持 ...