这篇文章主要介绍了关于小程序之如和使用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内部组件来进行页面的排版功能的更多相关文章

  1. 小程序框架之视图层 View~基础组件

    框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发.详细介绍请参考组件文档. 什么是组件: 组件是视图层的基本组成单元. 组件自带一些功能与微信风格一致的样式. 一个组件通常 ...

  2. 小程序实践(六):view内部组件排版

    涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1.默认排版 , 一个父组件里面两个子view 显示效果: 2.先给父view设置一个高度和颜色值,用于看效果 3.实现水平排列和垂直排列的 ...

  3. 微信小程序把玩(八)view组件

    原文:微信小程序把玩(八)view组件 刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-di ...

  4. 小程序框架之视图层 View~事件系统~WXS响应事件

    WXS响应事件 基础库 2.4.4 开始支持,低版本需做兼容处理. 背景 有频繁用户交互的效果在小程序上表现是比较卡顿的,例如页面有 2 个元素 A 和 B,用户在 A 上做 touchmove 手势 ...

  5. 小程序实践(二):swiper组件实现轮播图效果

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

  6. 微信小程序 发现之旅(一)—— 项目搭建与页面跳转

    开发微信小程序需要注册一个小程序账号,具体流程可以参照官方教程: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 开通账户之后,在 “开发设置 ...

  7. 微信小程序把玩(二十一)switch组件

    原文:微信小程序把玩(二十一)switch组件 switch开关组件使用主要属性: wxml <!--switch类型开关--> <view>switch类型开关</vi ...

  8. 微信小程序把玩(十八)picker组件

    原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...

  9. 微信小程序把玩(十二)text组件

    原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...

随机推荐

  1. ZooKeeper设置开机启动

    1 在init.d目录下新建脚本文件 进入到/etc/rc.d/init.d目录下,命令是: cd    /etc/rc.d/init.d 新建一个名为zookeeper的文件,命令是: touch ...

  2. Bootstrap Table--onEditableSave

    当某列编辑完成后,需要对当前列所在的行进行修改操作: $("#grid").bootstrapTable({ url:'', …… …… //其他属性 columns:[{ fie ...

  3. 密度聚类 DBSCAN

    刘建平:DBSCAN密度聚类算法 https://www.cnblogs.com/pinard/p/6208966.html API 的说明: https://www.jianshu.com/p/b0 ...

  4. 使用Vue前端框架实现知乎日报app

    这是:主页代码 <template> <view class="content"> <view class="uni-list"& ...

  5. MySQL课下作业

    目录 MySQL 实验内容 实验代码 实验截图 代码链接 MySQL 实验内容 下载附件中的world.sql.zip, 参考http://www.cnblogs.com/rocedu/p/63713 ...

  6. saml2协议sp-initial登录过程

    登录过程如下所示: 一次完整的saml认证过程,包括一次samlrequest和samlresponse, 首先用户如果想访问一个sp,sp会先检验用户是否登录,如果用户已经登录,即可以正常访问sp的 ...

  7. VS2010远程调试C#程序

    场景: 客户的计算机运行程序出现异常,由于办公场所不在一起,无法直接在客户的机器上调试.此时希望可以直接在开发人员的计算机(本地机器)上远程调试客户机上的软件. 假设: 本地机器的系统账户为 GIS, ...

  8. RobotFramework 用例出错后继续操作

    出错后退出 在默认情况下,当一个测试用例中的某个关键字返回错误时,这个测试用例就停止执行剩余的关键字.RF会继续执行下一个用例.这么做的好处是节省时间--反正这里出问题要返回来看了,再继续执行剩下的关 ...

  9. django项目部署过程

    django项目部署过程 1.上传代码 用git或者其他工具,如scp 代码上传后保证每个应用下的migrations文件夹里只有一个__init__.py文件,自己的迁移文件不要上传上来,具体的gi ...

  10. 系统分析与设计HW6

    1. 使用 UML State Model建模 建模对象: 参考 Asg_RH 文档, 对 Reservation/Order 对象建模. 建模要求: 参考练习不能提供足够信息帮助你对订单对象建模,请 ...