这篇文章主要介绍了关于小程序之如和使用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. Codeforces 963A Alternating Sum ( 思维 && 数论 )

    题意 : 题目链接 分析 : Tutorial 讲的很清楚 至于为什么这样去考虑 算是一个经验问题吧 如果一个问题要你给出模意义下的答案 就多考虑一下答案是要用逆元构造出来 也就说明有除法的存在 那么 ...

  2. BeanPostProcessor和BeanFactoryPostProcessor的区别

    官方文档: 在Spring核心的1.8章节 使用BeanPostProcessor自定义Bean BeanPostProcessor 接口定义了您可以实现的回调方法,以提供您自己的(或覆盖容器的默认) ...

  3. logstash之OutPut插件

    output插件是经过了input,然后过滤结构化数据之后,接下来我们需要借助output传到我们想传到的地方.output相当于一个输出管道. 2.3.1: 将采集数据标准输出到控制台 配置示例: ...

  4. javascript 链式调用+构造函数

    前几天面试,有一个问题是使用构造函数实现链式调用,后面查看了一些简单的资料,整理一下 首先,先说一下JS 中构造函数和普通函数的区别,主要分为以下几点 1.构造函数也是一个普通函数,创建方式和普通函数 ...

  5. 【机器学习速成宝典】模型篇04k近邻法【kNN】(Python版)

    目录 什么是k近邻算法 模型的三个基本要素 构造kd树 kd树的最近邻搜索 kd树的k近邻搜索 Python代码(sklearn库) 什么是K近邻算法(k-Nearest Neighbor,kNN) ...

  6. 网站运营文章LIST

    如何建立网站地图(site map) ● 伤心SEO之太平洋 ● 关键字密度与网站排名 ● 哪些因素决定网站SEO的价格 ● SEO:站在Google背后的搜钱力量 ● 网站被一搜索屏蔽,郁闷! ●  ...

  7. Controller控制台Vuser虚拟用户的运行状态

    Controller控制台Vuser运行的状态 Down:没有运行Pending:挂起Init:初始化Ready:准备就绪Run:正在运行Rendezvous:正在集结Passed:运行通过Faile ...

  8. 前端必须掌握的 docker 技能(2)

    概述 作为一个前端,我觉得必须要学会使用 docker 干下面几件事: 部署前端应用 部署 nginx 给部署的 nginx 加上 https 使用 docker compose 进行部署 给 ngi ...

  9. 编译mysql时CMake Error at cmake/readline.cmake:85 (MESSAGE)

    CMake Error at cmake/readline.cmake:85 (MESSAGE):  Curses library not found.  Please install appropr ...

  10. linux 学习笔记一

    Linux 学习笔记一 计算机 主要分为五个部分:控制器,运算器,存储器,输入设备,输出设备. 操作系统 操作系统就是针对硬件编写的程序,同时提供硬件接口调用的接口.操作系统需要处理如管理与配置内存. ...