商城系統(tǒng) 注冊(cè)

微信小程序開發(fā)之小程序組件使用教程

2018-05-30|HiShop
導(dǎo)讀:以下為大家介紹小程序開發(fā)過程中,小程序組件的使用教程。小程序組件是小程序開發(fā)中非常重要的部分,是開發(fā)者必須掌握的技能。...

以下為大家介紹小程序開發(fā)過程中,小程序組件的使用教程。小程序組件是小程序開發(fā)中非常重要的部分,是開發(fā)者必須掌握的技能。

微信小程序開發(fā)之小程序組件使用教程

icon

icon組件有3個(gè)屬性,如下:

  • type,可選值:success, success_no_circle, info, info_circle,warn, waiting, cancel, download, search, clear
  • color,如#C9C9C9。
  • size,默認(rèn)為23px。

再看具體的wxml和wxss。

<code class="language-wxml hljs fsharp has-numbering"><view class="demo-view-4">
    <view class="view-1">
        <icon class="margin" type="circle">
        <view class="margin">circle:多選未選中</view>
    </icon></view>
    <view class="view-1">
        <icon class="margin" type="success">
        <view class="margin">success:成功或已選中</view>
    </icon></view>
    <view class="view-1">
        <icon class="margin" type="success_no_circle">
        <view class="margin">success_no_circle:?jiǎn)芜x已選中</view>
    </icon></view>
    <view class="view-1">
        <icon class="margin" type="info">
        <view class="margin">info:信息提示</view>
    </icon></view>
    <view class="view-1">
        <icon class="margin" color="#C9C9C9" type="warn">
        <view class="margin">warn-#C9C9C9:普通警告</view>
    </icon></view>
    <view class="view-1">
        <icon class="margin" type="warn">
        <view class="margin">warn:強(qiáng)烈警告</view>
    </icon></view>
    <view class="view-1">
        <icon class="margin" type="waiting">
        <view class="margin">waiting:等待</view>
    </icon></view>
    <view class="view-1">
        <icon class="margin" type="download">
        <view class="margin">download:可下載</view>
    </icon></view>
    <view class="view-1">
        <icon class="margin" type="info_circle">
        <view class="margin">info_circle:有信息提示</view>
    </icon></view>
    <view class="view-1">
        <icon class="margin" type="cancel">
        <view class="margin">cancel:停止或關(guān)閉</view>
    </icon></view>
    <view class="view-1">
        <icon class="margin" type="search">
        <view class="margin">search:搜索</view>
    </icon></view>

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

    <view class="view-1">
        <view class="margin">PS:每個(gè)type都可以設(shè)置顏色(color),大小(size)</view>

    </view>


</view></code></pre>
<pre class="prettyprint" name="code">
<code class="language-css hljs  has-numbering">.demo-view-4{
    display:flex;
    height: 100%;
    flex-direction: column;
}

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

.margin{
    margin: 20rpx;
}</code>

text

wxml如下:

<code class="language-xml hljs  has-numbering"><text>My name is wisely。\n I am a Androider!</text></code>

progress

progress組件的屬性如下:

屬性名 類型 默認(rèn)值 說(shuō)明
percent Float 無(wú) 百分比0~100
show-info Boolean false 在進(jìn)度條右側(cè)顯示百分比
stroke-width Number 6 進(jìn)度條線的寬度,單位px
color Color #09BB07 進(jìn)度條顏色 (請(qǐng)使用 activeColor)
activeColor Color   已選擇的進(jìn)度條的顏色
backgroundColor Color   未選擇的進(jìn)度條的顏色
active Boolean false 進(jìn)度條從左往右的動(dòng)畫

電話咨詢 預(yù)約演示 0元開店