微信小程序_(組件)icon、text、rich-text、progress四大基礎組件

 

 

　　微信小程序基礎組件官方文檔　　傳送門

　　

　　Learn

　　　　1、icon圖標組件

　　　　2、rich-text富文本組件

　　　　3、text文本組件

　　　　4、progress進度條組件

 

 

1、icon圖標組件

　　type：icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

　　size：icon的大小，單位px（2.4.0起支持rpx）【默認值23px】

　　color：icon的顏色，同css的color

 

<!--index.wxml-->
<icon type="success" ></icon>
<icon type="clear" ></icon>
<icon type="success" size="40" ></icon>
<icon type="success" size="66" color='blue'></icon>
<!-- 外邊的圈沒有了 -->
<icon type="success_no_circle" size="66" color='blue'></icon>

index.html

 

 

 2、text文本組件

　　selectable：文本是否可選【默認值爲false】

　　space：顯示連續空格【默認值爲false】【目前版本是有問題的】

 

<!--index.wxml-->
<view>
<text>普通的    text文本  內容</text>
</view>

<view>
<text selectable='{{true}}'>可選的  text文本  內容</text>
</view>

<view>
<text space='{{true}}'>space      空格      space </text>
</view>

index.wxml

 

 

 3、rich-text富文本

　　nodes：節點列表 / HTML String【默認值爲[]】

 　　

 

　　顯示富文本編輯框的兩種顯示

　　第一種方式

mycontent1:'<img class="shizhan-course-img" alt="SpringBoot" src="//img.mukewang.com/szimg/5ae4172200010b8f05400300-360-202.jpg">'

 

　　第二種方式

    mycontent2:[
      {
        name:"img",
        attrs:{
          class:"shizhan-course-img",
            src:"//img.mukewang.com/szimg/5ae4172200010b8f05400300-360-202.jpg"
        }
      }
    ]

 

 

<!--index.wxml-->
<rich-text nodes="{{mycontent2}}">
</rich-text>

index.wxml

 

Page({
  data:{
    //第一種方式
    mycontent1:'<img class="shizhan-course-img" alt="SpringBoot" src="//img.mukewang.com/szimg/5ae4172200010b8f05400300-360-202.jpg">',
    //第二種方式
    mycontent2:[
      {
        name:"img",
        attrs:{
          class:"shizhan-course-img",
            src:"//img.mukewang.com/szimg/5ae4172200010b8f05400300-360-202.jpg"
        }
      }
    ]

  }
})

index.js

 

 

4、progress進度條組件

　　percent：百分比0~100

　　show-info：在進度條右側顯示百分比【默認值爲false】

　　stroke-width：進度條線的寬度，單位px（2.4.0起支持rpx）【默認值爲6】

　　activeColor：已選擇的進度條的顏色

　　backgroundColor：未選擇的進度條的顏色

　　active：進度條從左往右的動畫【默認值爲false】

　　 bindactiveend：動畫完成事件

 

<!--index.wxml-->
<progress percent='35'
  show-info='{{true}}'
  stroke-width="10"
  activeColor="red"
  backgroundColor="green"
  active="{{true}}"
  bindactiveend="bindactiveended"
></progress>

index.wxml

 

Page({
  data:{     
  },
  bindactiveended:function(){
    console.log("動畫完成事件啦!");
  }
})

index.js