小程序实践(六):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结构,然后再设置各种事件即可,这种组件有一个特点: ...
随机推荐
- leetcode — combination-sum
import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...
- 【原创】Git删除暂存区或版本库中的文件
0 基础 我们知道Git有三大区(工作区.暂存区.版本库)以及几个状态(untracked.unstaged.uncommited),下面只是简述下Git的大概工作流程,详细的可以参见本博客的 ...
- Use Generic Replacements of 1.X Framework API Classes 用泛型替换Framework 1.X版本的API类
第一章,第一节 用泛型替换Framework 1.X版本的API类. 说起来,我是没接触过Framework 1.X版本的程序,12年毕的业(算算时间也一年多了,依旧一事无成,汗),毕业之后到公司实习 ...
- 基于SpringMVC+Spring+MyBatis实现秒杀系统【客户端交互】
前言 该篇主要实现客户端和服务的交互.在第一篇概况里我已经贴出了业务场景的交互图片. 客户端交互主要放在seckill.js里来实现.页面展现基于jsp+jstl来实现. 准备工作 1.配置web.x ...
- Shuffle过程
Shuffle过程 在MapReduce框架中,shuffle是连接Map和Reduce之间的桥梁,Map的输出要用到Reduce中必须经过shuffle这个环节,shuffle的性能高低直接影响了整 ...
- @Html.xxxxxFor() 规范写法
@Html.TextBoxFor() 讲解(其他类似的 @Html.LabelFor 等)同理 @Html.TextBoxFor(model => model.SearchParams.Name ...
- 开发谷歌浏览器插件会上瘾,搞了一个JSONViewer,一个页面格式化多条JSON,提升工作效率
最近写了一个谷歌浏览器插件(Chrome extension),拿出来分享下,希望能提升大家的工作效率. 一.背景 先说痛点:日常开发中,经常需要不停的把接口输出的JSON拷贝到在线JSON格式化页面 ...
- 数据库部分(MySql)_3
表设计之关联关系 一对一:有两张表A和B,A表中有一条数据对应B表中的一条数据称为一对一: 应用场景:用户表和用户扩展表,商品表和商品信息扩展表: 如何建立关系:在从表中添加一个外键字段指向主表的主键 ...
- WebAPI参数传值string转bool,int转bool相关问题
今天在公司同事问了我一个问题,用postman传递json字符串给接口,接口获取到的值不正确. 我就看到下面的json数据: { "Mark":"1" } 接口 ...
- [nodejs] nodejs开发个人博客(四)数据模型
数据库模型 /model/db.js 数据库操作类,完成链接数据库和数据库的增删查改 查询表 /*查询*/ select:function(tableName,callback,where,field ...