您现在的位置是:网站首页>>微信>>微信小程序

微信小程序组件——基础内容

发布时间:2019-08-07 16:33:17作者:wangjian浏览量:139点赞量:0

    一:icon图标

    icon组件属性:

    type:icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear

    size:icon的大小,默认为23

    color:icon的颜色

    例:

    <!-- wxml -->
    <view class="group">
    <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
    </block>
    </view>

    // js
    Page({
    data: {
    iconType: [
    'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ],
    }
    })

    现象如下:

    image.png

    二:progress进度条

    progress组件属性:

    percent:百分比0~100  

    show-info:在进度条右侧显示百分比 ,默认为false

    border-radius:圆角大小,默认为0

    font-size:右侧百分比字体大小,默认为16

    stroke-width:进度条线的宽度,默认为6

    activeColor:已选择的进度条的颜色,默认为#09BB07 

    backgroundColor:未选择的进度条的颜色,默认为#EBEBEB

    active:进度条从左往右的动画,默认为false

    active-mode:backwards: 动画从头播;forwards:动画从上次结束点接着播

    bindactiveend:动画完成事件

    例:

    <!-- wxml -->
    <progress
     percent="20" //百分比设置为20%
     show-info  //右侧显示百分比
     stroke-width="12" //进度条线的宽度设置为12
     active //显示进度条从左往右的动画
     border-radius="5"//圆角大小为5
     />

    现象如下:

    image.png


0 +1