涉及知识点:

  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. 使用SAX解析xml文档

    1.首先,在main方法中解析xml文档,具体代码如下: import org.w3c.dom.*; import javax.xml.parsers.DocumentBuilder; import ...

  2. TypeError: Cannot red property 'style' of null 错误解决

    错误信息如下: JSP代码如下: <c:if test ="${not empty excelErrors}"> <div id="excelError ...

  3. mysql 开发基础系列12 选择合适的数据类型(上)

    一. char 与varchar比较 在上图的最后一行的值只适用在"非严格模式",关于严格模式后面讲到.在“开发基础系列4“ 中讲到CHAR 列删除了尾部的空格.由于char是固定 ...

  4. Angular2入门:TypeScript的模块

    一.export 二.import 三.模块的默认导出

  5. Python 的 setitem、getitem、delitem 特殊方法使用

    简介 setitem:当属性被以索引方式赋值的时候会调用该方法 getitem:一般如果想使用索引访问元素时,就可以在类中定义这个方法 delitem:当使用索引删除属性时调用该方法 实例 __Aut ...

  6. maven安装、配置及创建工程

    准备工作 java开发环境(JDK) maven下载地址:http://maven.apache.org/release-notes-all.html 一.安装 安装maven超级简单,总共分三步: ...

  7. javascript小实例,编写一个方法,实现从n-m个数中随机选出一个整数

    别怪我是一个闷葫芦,没那么多花哨的语言,废话不多说,先说说小实例的要求: 编写一个方法,实现从n-m个数中随机选出一个整数,要求:传递的参数不足两个或者不是有效数字,返回[0-1]之间的随机数,需要解 ...

  8. SET NOCOUNT { ON | OFF }

    当 SET NOCOUNT 为 ON 时,不返回计数(表示受 Transact-SQL 语句影响的行数) SET NOCOUNT 为 ON 时,也更新 @@ROWCOUNT 函数. 当 SET NOC ...

  9. Linux服务器评测脚本 中文IO脚本简单易懂

    中文版: wget -N --no-check-certificate https://raw.githubusercontent.com/FunctionClub/ZBench/master/ZBe ...

  10. mysql存储过程调用含out参数

    mysql 数据库有以下存储过程: CREATE DEFINER=`root`@`localhost` PROCEDURE `hovertreeTest`( IN `Param1` INT, ), O ...