用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序开发手记《五》:组件

纸飞机 2018-3-8 09:33

作者:王梵,来自授权地址iconicon组件有3个属性,如下:type,可选值:success, success_no_circle, info, info_circle,warn, waiting, cancel, download, search, clearcolor,如#C9C9C9。size,默认为23px。先看 ...

作者:王梵,来自

授权地址

icon


icon组件有3个属性,如下:

  • type,可选值:success, success_no_circle, info, info_circle,warn, waiting, cancel, download, search, clear
  • color,如#C9C9C9。
  • size,默认为23px。

先看一张效果图:

再看具体的wxml和wxss。

class="demo-view-4">
    class="view-1">
        class = "margin" type="circle" />
        class="margin">circle:多选未选中
    
    class="view-1">
        class = "margin" type="success" />
        class="margin">success:成功或已选中
    
    class="view-1">
        class = "margin" type="success_no_circle" />
        class="margin">success_no_circle:单选已选中
    
    class="view-1">
        class = "margin" type="info" />
        class="margin">info:信息提示
    
    class="view-1">
        class = "margin" type="warn" color="#C9C9C9" />
        class="margin">warn-#C9C9C9:普通警告
    
    class="view-1">
        class = "margin" type="warn" />
        class="margin">warn:强烈警告
    
    class="view-1">
        class = "margin" type="waiting" />
        class="margin">waiting:等待
    
    class="view-1">
        class = "margin" type="download" />
        class="margin">download:可下载
    
    class="view-1">
        class = "margin" type="info_circle" />
        class="margin">info_circle:有信息提示
    
    class="view-1">
        class = "margin" type="cancel" />
        class="margin">cancel:停止或关闭
    
    class="view-1">
        class = "margin" type="search" />
        class="margin">search:搜索
    

    class="view-1">
        class = "margin" type="clear" />
        class="margin">clear:删除
    

    class="view-1">
        class="margin">PS:每个type都可以设置颜色(color),大小(size)

    


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
.demo-view-4{
    display:flex;
    height: 100%;
    flex-direction: column;
}

.view-1{
    display:flex;
    height: 100%;
    flex-direction: row;
}

.margin{
    margin: 20rpx;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

text


效果图如下:

wxml如下:

<text>My name is wisely。\n I am a Androider!text>
  • 1
  • 1

progress


progress组件的属性如下:

属性名类型默认值说明
percentFloat百分比0~100
show-infoBooleanfalse在进度条右侧显示百分比
stroke-widthNumber6进度条线的宽度,单位px
colorColor#09BB07进度条颜色 (请使用 activeColor)
activeColorColor已选择的进度条的颜色
backgroundColorColor未选择的进度条的颜色
activeBooleanfalse进度条从左往右的动画

效果图如下:

<view class="demo-view-4">

    <progress class = "margin" percent="60" show-info/>

    <progress class = "margin" percent = "80" active activeColor = "
                
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏