微信小程序显示样式知识点总结

1. view标签之flex布局

flex即HTML中的inline,使块状元素变为行内元素

display: flex;

1.1 flex布局的方向选择

设置flex布局后,可以选择横向布局或纵向布局,共有以下四种方式

flex-direction: 
row：            从左到右的水平方向为主轴
row-reverse：    从右到左的水平方向为主轴
column：            从上到下的垂直方向为主轴
column-reverse：    从下到上的垂直方向为主轴

1.2 横向与纵向布局的其他选项

• 横向布局 justify-content

  flex-start        从左边开始(默认值)
  flex-end        从右边开始
  flex-center        水平居中对齐
  space-between    两端对齐
  space-around    每个元素间的距离相等,且首尾也有相等的距离

• 纵向布局align-items

  stretch            纵向填充整个容器
  flex-start        从顶部开始
  flex-end        从底部开始
  center            纵向居中
  baseline         以子元素的第一行文字对齐 ??

子view有个属性为 align-self,他有纵向布局的五个选择,再加上auto

1.3 控制view是否换行

flex-wrap:
    nowrap          不换行(默认)
    wrap            换行
    wrap-reverse    换行,第一行在最下面

参考文档: https://www.cnblogs.com/sun8134/p/6395947.html

2. 换行, 单个空格,连续多个空格

• 换行\n 需要注意的是,需要换行的文字,必须包裹在text标签中
• 单个空格 可以使用\t,多个\t只显示一个空格,要显示多个空格,可以使用下面的方法
• 连续多个空格 解析多个空格时 需要包裹在``标签中,若页面显示则需要加decode="{true}"

  此处可以直接连续多个空格,都可以识别
  你好 啊 哈哈哈（空格是中文字符一半大小）
  你好 啊 哈哈哈（空格是中文字符大小）
  你好 啊 哈哈哈（空格根据字体设置）

  或

  你好 啊   哈哈哈（空格是中文字符一半大小）
  你好 啊   哈哈哈（空格是中文字符大小）
  你好 啊   哈哈哈（空格根据字体设置）

3. 阴影效果

• 盒模型阴影box-shadow 外阴影： box-shadow: 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色; X轴的正值表示方向为右,Y轴的正值表示方向为下 内阴影: 在外阴影的基础上加上 inset X轴的正值表示方向为左,Y轴的正值表示方向为上
• 文字阴影text-shadow 与盒模型的外阴影的属性,功能一致 没有内阴影 参考文档: http://www.cnblogs.com/wuchuanlong/p/5980766.html

4. 渐变效果 gradients

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

  // 从上到下(默认)
  background: linear-gradient(red, blue); 
  // 从左到右
  background: linear-gradient(to right, red , blue);
  ...

参考文档: https://blog.csdn.net/u010377372/article/details/79721725

解决"\n"无法达到换行效果

在数据库中的\n取出时会变成\\n，而在小程序的text组件中要达到换行的效果，则需要将\\n转换成\n。

解决方法：

content.replace(/\\n/g, "\n");

文档：https://blog.csdn.net/zhangying1994/article/details/86552970