微信小程序把玩《四》：text組件，progress組件，button組件

首頁關於我們 ky体育综合小程序解決方案官网开云聯係我們

服務項目

品牌網站建設

數字營銷

係統平台開發

數字產品

安全運維

首頁 > 官网开云 > 小程序常見問題

微信小程序把玩《四》：text組件，progress組件，button組件

時間：2016-10-18 19:04:00

一：text組件

通常文本設置要不在wxml中設置，再要不就是通過weml綁定在js中設置文字。

wxml

<view >
<text>我是文本組件</text>
</view>
<text>{{text}}</text>

Page({
/**
* 初始化數據
*/
data:{
text:"我是在js文件中綁定的文本"
},
onLoad:function(options){
// 頁麵初始化 options為頁麵跳轉所帶來的參數
},
onReady:function(){
// 頁麵渲染完成
},
onShow:function(){
// 頁麵顯示
},
onHide:function(){
// 頁麵隱藏
},
onUnload:function(){
// 頁麵關閉
}
})

二：progress組件

進度條描述的是一種加載的狀態，比如軟件升級下載進度，視頻，圖片下載進度…

主要屬性：

wxml

<progress
percent="80"
show-info="true"
stroke-width="5"
color="red"
active="true"/>

三：button組件

button按鈕用的算是最普遍的組件之一。

主要屬性：

wxml

<button type="defaule" bindtap="clickButton">Defalut</button>


<button type="primary" disabled="true" loading="true">Primary</button>

<button type="warn">warn</button>

Page({
data:{
// text:"這是一個頁麵"
},

/**
* button點擊事件監聽
*/
clickButton: function(e) {
//打印所有關於點擊對象的信息
console.log(e);
},
onLoad:function(options){
// 頁麵初始化 options為頁麵跳轉所帶來的參數
},
onReady:function(){
// 頁麵渲染完成
},
onShow:function(){
// 頁麵顯示
},
onHide:function(){
// 頁麵隱藏
},
onUnload:function(){
// 頁麵關閉
}
})