涉及知识点：

　　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都是水平垂直都居中

　　　　　　------------------------>

--------------------------------------------------------------------------------------

小程序实践（一）：主页tab选项实现

小程序实践（二）：swiper组件实现轮播图效果

小程序实践（三）：九宫格实现及item跳转

小程序实践（四）：动态控制组件的显示/隐藏

小程序实践（五）：for循环绑定item的点击事件

小程序实践（六）：view内部组件排版

小程序实践（七）：页面间传值

小程序实践（八）：验证码倒计时功能

小程序实践（九）：返回到上一个界面并传值回去

小程序实践（十）：textarea实现简单的编辑文本界面

小程序实践（十一）：showModal的使用

小程序实践（十二）：七牛云上传图片

小程序实践（六）：view内部组件排版的更多相关文章

  1. 小程序实践（二）：swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  2. 小程序实践（十一）：showModal的使用

    显示模态对话框,确定和取消两个选择+标题+内容的对话框 . // 编辑用户性别 tapSex:function(res){ var that = this wx.showModal({ title: ...

  3. 小程序实践（十）：textarea实现简单的编辑文本界面

    textarea是官方的原生组件,用于多行输入 简单的例子,监听文本内容.长度,以及设置最大可输入文本长度 wxml <view class='textarea-Style'> <t ...

  4. 小程序实践（五）：for循环绑定item的点击事件

    微信展示列表效果借助于 wx:for  简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的 ...

  5. 小程序实践（三）：九宫格实现及item跳转

    效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间. --------------------------------------------------------------- ...

  6. 小程序实践（一）：主页tab选项实现

    官方文档 效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改 如图: ----------------------------------------------------- ...

  7. 小程序之如和使用view内部组件来进行页面的排版功能

    这篇文章主要介绍了关于小程序之如和使用view内部组件来进行页面的排版功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1 ...

  8. 微信小程序学习笔记四 自定义组件

    1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...

  9. 微信小程序开发03-这是一个组件

    编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...

随机推荐

  1. Redis 常用操作命令，非常详细！

    下面总结并演示了 Redis 的 常用管理命令.key 操作.字符串.集合.列表.散列类型的操作命令. 你需要掌握的 Redis 知识 史上最全 Redis 高可用解决方案总结 为什么分布式一定要有R ...

  2. app测试之专项测试

    专项测试包含很多东西,安装.升级.卸载.性能.安全.网络.随机等等,这些都属于专项测试 一个app的正常到用户手里使用,功能是最基础的测试,专项测试测试主要的. 下面介绍一些常用的专项测试: 1.多任 ...

  3. Percona Server 升级 5.7 到 8.0 版本

    今天发现 Percona Server 已经发布了 8.0 的版本,于是把服务端的 MYSQL 的版本升级了下:备份好数据,升级按照官方的文档来 $ percona-release enable re ...

  4. spring-boot-starter大力出奇迹

    一.前言 ​ 上篇文章我们已经聊了SpringBoot的启动过程中的各类扩展点,那么从http://start.spring.io上我们生成的demo项目中,到目前就剩下了maven工程的pom.xm ...

  5. How Tomcat works — 三、tomcat启动（2）

    在了解了tomcat 的一些基本组件之后,学习启动过程就更容易理解了,因为启动过程就是启动各个组件. 目录 启动顺序 Bootstrap类 Catalina类 StandardServer类和Stan ...

  6. springboot情操陶冶-@Conditional和@AutoConfigureAfter注解解析

    承接前文springboot情操陶冶-@Configuration注解解析,本文将在前文的基础上阐述@AutoConfigureAfter和@Conditional注解的作用与解析 1.@Condit ...

  7. Nodejs sublime text 3安装与配置

    1.下载subline的nodejs插件 2.解压zip文件, 并重命名文件夹“Nodejs” 3.  打开sublime,操作"preference" --> " ...

  8. JAVA课程设计——一个简单的教务人事管理系统

    大三上学期期末总结,没错,上学期,写在下学期新学期开始,哈哈哈. 上学期学习了面向对象程序设计,课程设计的题目使用JAVA语言完成一个简单的教务人事管理系统,能够实现访问数据库的登录验证,分别按部门和 ...

  9. vue_drf之视频接口

    一.vue-video 1,安装依赖 npm install vue-video-player --save 2,main.js文件中加载组件 require('video.js/dist/video ...

  10. does not support SSL connections

    语言:C# 开发工具:Visual Studio 2017 问题场景介绍: nuget引用的MySql.Data版本是6.10.5,MySQL的数据库连接串如下: Server=xxx;Databas ...