微信小程序（六）实现自定义导航栏
导航栏.png
1.页面配置
- navigationStyle：导航栏样式，仅支持以下值：
- default 默认样式
- custom 自定义导航栏，只保留右上角胶囊按钮
2.计算导航栏的高度
导航栏的高度组成部分.png
2-1.wx.getMenuButtonBoundingClientRect
wx.getMenuButtonBoundingClientRect
获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
- height：高度，单位：px。
- top：上边界坐标，单位：px。
2-2.wx.getSystemInfo
获取系统信息。
- statusBarHeight：状态栏的高度，单位px。
2-3.计算
导航栏的高度 = 状态栏高度 + 菜单按钮高度 + 菜单按钮的上下间隔的高度
3.基础组件
3-1.什么是组件
什么是组件：
- 组件是视图层的基本组成单元。
- 组件自带一些功能与微信风格一致的样式。
- 一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。
注意：所有组件与属性都是小写，以连字符-连接
<组件 属性1="" 属性2="" ... >
组件内容
</组件>
3-2.属性类型
3-3.公共属性
id, class, style, hidden, data-*, bind*/catch*
4.数据绑定
数据绑定使用 Mustache 语法（双大括号）将变量包起来。
4-1.组件内容
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
4-2.组件属性(需要在双引号之内)
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
4-3.控制属性(需要在双引号之内)
<view wx:if="{{condition}}"> </view>
Page({
data: {
condition: true
}
})
4-4.关键字(需要在双引号之内)
true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。
<checkbox checked="{{false}}"> </checkbox>
特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。
4-5.运算
可以在 {{}} 内进行简单的运算。
4-6.扩展运算符
扩展运算符 ... 来将一个对象展开
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
}
}
})
最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。
5-3.事件对象
-
target：触发事件的源组件。
dataset:事件源组件上由data-开头的自定义属性组成的集合。 -
currentTarget：事件绑定的当前组件。
6.WXSS
6-1.尺寸单位
rpx: iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
6-2.选择器
- .class：类选择器。
-
id：id选择器，具有唯一性。
- element：组件选择器。
6-3.样式的三种方式
- 内联(行内)样式 --- 通过 style 设置。
- 全局样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。 - 局部(页面)样式
在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
优先级：行内样式 > 页面样式 > 全局样式。
注意：一般静态的样式统一写到 class 中。style 接收动态的样式。
6-4.定位
-
display --- 规定元素应该生成的框的类型。
inline --- 默认。此元素会被显示为内联元素，元素前后没有换行符。
flex --- 微信小程序建议用。
inline-block --- 行内块元素 。 -
position
static --- 默认，没有定位。
absolute --- 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 - 绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位。---> 父级元素是否已经定位看是否设置了 position。relative --- 生成相对定位的元素
。
---> 相对定位的元素是在原来的位置上相对自己做了一个偏移。
fixed --- 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
sticky --- 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
6-5.盒子
微信建议使用flex。
flex的容器.png
-
flex --- 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
flex:1 --- 让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容。 -
flex-direction --- 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置 。
column --- 设置主轴为垂直方向。
row --- 默认。设置主轴为水平方向。 -
justify-content --- 元素在主轴上的对齐方式。
flex-start（默认，与开始位置对齐）、flex-end（与结束位置对齐），元素排列顺序不变。
baseline
center（居中对齐）。
space-around（元素平分所有空间，并且单个元素在自己的空间里面居中）。
space-between（与 space-around 一样，只是两边靠边）。 -
align-items --- 元素在交叉轴上的对齐方式。
-
align-self --- 定义交叉轴方向元素自身的对齐方式。
-
flex-wrap --- 控制flex容器是单行或者多行。
nowrap --- 默认。规定灵活的项目不拆行或不拆列。
wrap --- 规定灵活的项目在必要的时候拆行或拆列。
6-6.用户界面
- box-sizing
border-box --- 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
控件超过了父view的界限，就用这个属性限制
6-7.边框
- border-radius --- 圆角边框 。
- border-top: --- 复合属性。设置对象顶部边框的特性。
可以按顺序设置如下属性： border-top-width, border-top-style, and border-top-color。
例如：12rpx solid #f7f7f7;
solid --- 实线 。
dashed --- 虚线。
