<!--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;
}