基础内容组件icon，progress，text-CSDN博客

本文链接：https://blog.csdn.net/sizzurp/article/details/108314116

<!--index.wxml-->
<view class="container">
  <!-- icon text progress -->
  <!-- iconType: [ 'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear' ] -->
  <!-- type 用于定义图标类型，只能是规定范围的类型，除了这些内置图标，其他图标必须通过图片方式使用 -->
  <icon type="success_no_circle"></icon>
  <!-- size 用于指定图标大小 默认是23 长度单位默认为px，2.4.0起支持传入单位(rpx/px) -->
  <icon type="info" size="60"></icon>
  <!-- color 用于指定图标颜色 取值就是CSS颜色取值 -->
  <icon type="info" size="60" color="red"></icon>

  <!-- text 类似于HTML中的p标签，但是p标签不能嵌套 -->
  <!-- text 主要是为了就可以很好的控制页面上的文字样式 -->
  <!-- text 还支持换行 -->
  <text>这是
    一段<text>文本</text>内容</text>

  这是一段没有被text包裹的文本

  <!-- 显示一个进度条 -->
  <!-- show-info 是用来控制是否显示具体数值的 -->
  <progress percent="20" show-info></progress>

  <progress percent="50" active></progress>
</view>

正常显示progress组件需要在app.wxss中注释掉align-items

align-items 设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项（单行）的时候使用
flex-start 从头部开始
flex-end 从尾部开始
center 居中显示
stretch 拉伸

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}