用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

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

天下雪 2017-4-25 00:05

作者:王梵,来自授权地址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。

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

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

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

    </view>


</view>
  • 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 = "
                
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: 王梵 来自: 授权地址

相关阅读