這一章我們要介紹的是小程序的按鈕——button
這個很好理解吧。
首先，它長這個樣子。
（一）外觀屬性
我們在開發者工具中通過代碼來具體演示一下吧~~
1、新建一個頁面demo13
2、打開demo13.wxml 文件，刪除裏面原來的內容，寫入以下代碼：
<button>默認按鈕</button>
保存，左側小程序頁面顯示”默認按鈕”
知曉了按鈕的外觀屬性後，我們來看一下button的屬性有哪些吧。
（二）button的屬性
屬性1：size
用來控制按鈕的大小。默認值是default
打開demo13.wxml 文件，代碼中加入size屬性，值為mini，如下：
<button size=”mini”> mini 默認按鈕</button>
保存後，可以看到頁面上的按鈕變小。
屬性2：type
用來控制按鈕顏色。
其中，顏色的有效值為：
default ：灰色；primary：綠色；warn：紅色
打開demo13.wxml 文件，代碼中加入type屬性，如下：
<button type=”primary”> primary 按鈕</button> <button type=”warn”> warn 按鈕</button>
保存後，頁面中出現綠色按鈕（primary），紅色按鈕（warn）。
屬性3：plain
用來設置按鈕是否鏤空，使其背景色呈現透明色。
打開demo13.wxml 文件，代碼中加入plain屬性，如下：
<button type=”warn” plain> plain 按鈕</button>
保存後，可看到plain按鈕是無背景色的。
屬性4：loading
等待網絡的標誌。
打開demo13.wxml 文件，type屬性下，代碼中再加入loading屬性，如下：
<button type=”primary” loading> loading 按鈕</button>
保存後，按鈕呈現形式如下：
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/274124.html
微信掃一掃 
支付寶掃一掃 