微信小程序 笔记9 icon text input progress组件

目录

icon组件

text组件

富文本 rich-text

progress组件

checkbox组件

---

icon组件

官方文档

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。一共只有三个属性：size，type，color。

其中type指的是icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

例子1：

<!--me.wxml-->  
<view class="container">
    <view>
      <icon type="success" size="100"></icon>
      <button type="primary">执行完毕</button>
    </view>
  </view>

效果：

例子2：倒计时

<!--me.wxml-->
  <view class="container">
    <view>
      <icon type="waiting" size="100"></icon>
      <view>操作进行中...{{seconds}}</view>
      <button type="default">取消</button>
    </view>
  </view>

//me.js部分
data: {
    seconds: 5
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this//外面创建变量函数里面用，因为函数里面this表示这个函数
    setInterval(function () {//阶梯调用，每1000ms调用一次
      var seconds = that.data.seconds
      if (seconds >= 1) {
        that.setData({
          seconds: seconds - 1
        })
      }
    }, 1000)
  },

效果：

例子3搜索栏

 <!--me.wxml--> 
 <view class="top-group">
    <view class="search-group">
      <icon type="search" class="sicon"></icon>
      <input class="search-input" placeholder="请输入关键字"></input>
      <icon type="clear" class="cicon"></icon>
    </view>
  </view>

//部分me.js
data: {
    value:""
  },
clear:function()
  {
    this.setData({
      value:""
    })
  },

/**me.wxss**/
.top-group{
  width: 100%;
  padding: 20rpx;
  background: skyblue;
  box-sizing: border-box;
}
.search-group{
  width: 100%;
  height: 80rpx;
  background: white;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
}

.sicon{
  flex-basis: 20px;
}
.cicon{
  flex-basis: 20px;
}
.search-input{
  flex: 1;
  padding: 0 10rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

效果

box-sizing：怪异模式

box-radius：控制圆角，给一个值是全部修改，给多个值按照上右下左

text组件

官方文档

属性	说明
selectable	文本是否可选
space	显示连续空格
decode	是否解码

space的合法值：ensp（中文字符空格一半大小）emsp（中文字符空格大小）nbsp（根据字体设置的空格大小）

decode：存在特殊符号的时候用。例如打一个大于号，要用> 要将decode设为true。decode可以解析的有   < > & '    

富文本 rich-text

可以放文字、图片等。

属性：

nodes：节点列表/HTML String

space：显示连续空格

nodes 不推荐使用 String 类型，性能会有所下降。

<!--me.wxml-->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

//me.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

可以采用一些转换工具，对内容进行转换。转换后的东西放在js里面一个大字符串或者大数组里，在data里面赋值即可。

progress组件

官方文档

例如：

<!--me.wxml-->
<progress percent="75" show-info font-size="32" stroke-width="40" border-radius="20" active-color="pink" active active-mode="forwards"></progress>

bindactiveend：动画结束事件

checkbox组件

多选项目

官方文档

例如：

<!--me.wxml-->
<form>
  <checkbox-group>
    <checkbox value="{{item.id}}" wx:for="{{lang}}">{{item.name}}</checkbox>
  </checkbox-group>
  <button form-type="submit">提交</button>
</form>

//me.js部分
data: { 
   lang:[
      {
        id:1,
        name:"python"
      },
      {
        id:2,
        name:"java"
      },
      {
        id: 3,
        name: "c++"
      }
    ]
  },

效果：