小程序:组件(图片、图标、VIEW、进度条、父文本、按钮、开关、输入框、input)

1、图片

<cover-image src="../../resources/imgs/shouye.png"></cover-image>

2、图标(长度为px)

<icon type="warn" size="25"></icon>
<icon type="success" size="28"></icon>
<icon type="success_no_circle" size="30"></icon>
<icon type="info" size="32"></icon>
<icon type="waiting" size="32"></icon>

3、VIEW

<view hover-class="hover" hover-start-time="2000" hover-stay-time="3000">变色</view>

 停在文字上方2s后变为红色,红色的持续时间为3s

.hover{
  color: red;
}

4、进度条

<!--进度条-->
<progress percent="70" show-info="{{true}}" stroke-width="8" activeColor="red" backgroundColor="black" active="forward"></progress>

宽度为8,背景色为黑色,显示数据的部分为红色,并有显示特效,从左到右

5、父文本

<!--父文本,可以识别html的标签,把带有标签的写在node属性上-->
<rich-text><h2>我是一个二级标题</h2></rich-text>

6、按钮

<!--按钮-->
<button type="warn">warn</button>
<button form-type="submit">提交</button>
<button size="mini" loading="{{true}}">button按钮</button>

 可以选择格式、大小等

7、开关选择器switch

<switch type="checkbox"></switch>

8、输入框

 <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" placeholder-style="color:red;" />

 

 高度可以随着输入内容的多少而改变

9、input标签

<view>请输入:</view>
 <input  maxlength="10" placeholder="密码、10位" password="{{true}}"/>

原文地址:https://www.cnblogs.com/zhai1997/p/13182534.html