欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

小程序学习02->icon图标与progress进度条

程序员文章站 2024-02-16 20:52:34
...

一、icon

icon为显示图标的组件,其属性如下所示:
小程序学习02->icon图标与progress进度条

.wxml文件

<view class="group">
    <block wx:for="{{iconSize}}">
        <icon type="success" size="{{item}}"></icon>
    </block>
</view>

<view class="group">
    <block wx:for="{{iconType}}">
        <icon type="{{item}}" size="45"></icon>
    </block>
</view>

<view>
    <block wx:for="{{iconColor}}">
        <icon type="success" size="60" color="{{item}}"></icon>
    </block>
</view>

.js文件

Page({
  data:{
    iconSize:[20,30,40,50,60,70],
    iconColor:[
      'red','orange','yellow','green','rgb(0,255,255)','blue',
      'purple'
    ],
    iconType:[
      'success','success_no_circle','info','warn','waiting',
      'search','cancel'
    ],
  },

效果图:
小程序学习02->icon图标与progress进度条

二、progress

progress属性如下图所示:
小程序学习02->icon图标与progress进度条

.wxml文件

<progress percent="40" show-info="true"/>
<progress percent="30" stroke-width="100"/>

<progress percent="50" color="#ff0000"/>

<progress percent="70" active/>

效果图:
小程序学习02->icon图标与progress进度条