小程序基础组件

icon是一个图标组件, 根据其类型的不同, 而生成不同的图标

<view wx:for='{{iconType}}'>
  <icon type='{{item}}' color='blue' size='100'/>
</view>

type可取的值有: 'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'

这个size默认是23, 单位是px, 在书写时size="100", 不要写成size="100px", 否则无效

color不写时, 表示使用各种图标的默认颜色(各种图标使用自身的默认颜色)

text组件

其默认不是换行的, 像view是默认换行的

text组件里的文字可以被选中(长按鼠标), view中的文字则不行

需要加上一个selectable属性:

<text selectable='true'>可以选中我</text>

加上space属性还可以保留大量空格:

<text space='nbsp'>我  有大量                   空格</text>

经测试在view上加这些属性无效

progress进度条组件

<progress percent='50' show-info stroke-width='20' color='red' active/>

percent='50'表示占总进度条的50%

show-info显示进度条的当前值

stroke-width='20'进度条的大小

color进度条颜色

active有动画效果

使用progress模拟进度:

把active属性去掉

<progress percent='{{progress}}' show-info stroke-width='20' color='red'/>

js中添加数据, 其中初始进度为0, 再加上onLoad事件, 在onLoad中添加定时器, 每0.05秒执行一下

Page({
  data: {
    progress : 0
  },
  onLoad: function() {
    var that = this;                  /*把this保存起来, 由于在setInterval函数中取不到它*/
    var pNumber = 0;

    var ptimer = setInterval(function(){
      pNumber ++;
      if(pNumber >= 100) {                    /*进度为100%时清除定时器*/
        clearInterval(ptimer);
      }
      that.setData({                        /*改变进度条当前值*/
        progress: pNumber
      });
    }, 50);
  }
})