微信小程序 筆記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++"
      }
    ]
  },

效果：