四： 基本标签

一、Icon 图标

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/* ---page/test/test.wxml----*/   <view class="group">   <block wx:for="{{iconType}}">     <icon type="{{item}}" size="45"/>   </block> </view>   <view class="group">   <block wx:for="{{iconColor}}">     <icon type="success" size="45" color="{{item}}"/>   </block> </view>   <view class="group">   <block wx:for="{{iconSize}}">     <icon type="success" size="{{item}}"/>   </block> </view>   /* ---page/test/test.wxml----*/

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/* ---page/test/test.js----*/   Page({   data: {     iconSize: [20, 30, 40, 50, 60, 70],     iconColor: [       'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'     ],     iconType: [       'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',       'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',       'info_circle', 'cancel', 'search', 'clear'     ]   } })   /* ---page/test/test.js----*/

 

效果图是这样的。。。之后在把属性图附上。。就是样式。这章基本上没啥可说的。

属性名	类型	默认值	说明
type	String		icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	Number	23	icon的大小，单位px
color	Color		icon的颜色，同css的color

二、text 

这个其实也没什么可说的。。他相当于 html的 span标签 是个行内元素。两个text标签在一起并不会换行。

 

三、progress 进度条

percent	Float	无	百分比0~100
showInfo	Boolean	false	在进度条右侧显示百分比
strokeWidth	Number	6	进度条线的宽度，单位px
color	Color	#09BB07	进度条颜色
active	Boolean	false	进度条从左往右的动画

1 2 3 4 5 6 7 8 9

/* ---page/test/test.wxml----*/   <progress percent="20" show-info /> <progress percent="40" stroke-width="12" /> <progress percent="60" color="pink" /> <progress percent="80" active />   /* ---page/test/test.wxml----*/

也是样式。。其实可以 在属性里  percent={{data}} 来操作。然后递增。比如说 上传文件的时候 就可以使用他。。