本篇文章為大家帶來了關於微信小程式的相關知識,其中主要介紹了一些常用表單元件,包括了button、checkbox、input、label等等相關問題,下面一起來看一下,希望對大家有幫助。
【相關學習推薦:小程式學習教學】
1、常用表單元件
1.1 button
<button></button>
為按鈕元件,是常用的表單元件之一,用於事件的觸發以及表單的提交。其屬性表如下所示。
程式碼範例:
<view> <view>7.button小案例</view> <view>(1)迷你按钮</view> <button>主要按钮</button> <button>次要按钮</button> <button>警告按钮</button> <view>(2)按钮状态</view> <button>普通按钮</button> <button>警用按钮</button> <button>加载按钮</button> <view>(3)增加按钮事件</view> <button>点我获取用户信息</button></view>
1.2 checkbox
#<checkbox></checkbox>
為複選框元件,常用於在表單中進行多項資料的選擇。複選框的<checkbox-group></checkbox-group>
為父控件,其內部嵌套若干個<checkbox></checkbox>
子控件。
<checkbox-group></checkbox-group>
屬性如下:
<checkbox></checkbox>
元件的屬性如下:
程式碼範例:
checkbox.wxml
<view> <view>8.checkbox小案例</view> <view>利用for循环批量生成</view> <checkbox-group> <label> <checkbox></checkbox>{{item.value}} </label> </checkbox-group> </view>
checkbox.js
Page({ data: { items: [ { name: "tiger", value: "老虎" }, { name: "elephant", value: "大象" }, { name: "lion", value: "狮子", checked: "true" }, { name: "penguin", value: "企鹅" }, { name: "elk", value: "麋鹿" }, { name: "swan", value: "天鹅" }, ] }, checkboxChange:function(e) { console.log("checkbox发生change事件,携带value值为:", e.detail.value) }})
#1.3 input
<input>
為輸入框元件,常用於文字(如姓名、年齡等資訊)的輸入。屬性表如下:
<view> <view>9.input小案例</view> <view>(1)文字输入框</view> <input> <view>(2)密码输入框</view> <input> <view>(3)禁用输入框</view> <input> <view>(4)为输入框增加事件监听</view> <input></view>
#1.4 label
<label></label>
是標籤元件,不會呈現任何效果,但是可以用來改進表單元件的可用性。當使用者在label元素內點擊文字時,就會觸發此控件,即當使用者選擇該標籤時,事件會傳遞到和標籤相關的表單控制項上,可以使用for屬性綁定id,也可以將空間放在該標籤內部,該組件對應屬性如下所示。
wxml
<view> <view>10.lable小案例</view> <view>(1)利用for属性</view> <checkbox-group> <checkbox></checkbox> <label>老虎</label> <checkbox></checkbox> <label>大象</label> <checkbox></checkbox> <label>狮子</label> </checkbox-group> <view>(2)label包裹组件</view> <checkbox-group> <label> <checkbox></checkbox>老虎 </label> <label> <checkbox></checkbox>大象 </label> <label> <checkbox></checkbox>狮子 </label> </checkbox-group></view>
1.5 form
<form></form>
為表單控制項元件,用於提交表單組件中的內容。 <form></form>
控制項元件內部可以嵌套多種元件。
元件屬性如下:
form.wxml
<view> <view>11.form小案例</view> <view>模拟注册功能</view> <form> <text>用户名:</text> <input> <text>密码:</text> <input> <text>手机号:</text> <input> <text>验证码:</text> <input> <button>注册</button> <button>重置</button> </form></view>
form.js
Page({ onSubmit(e) { console.log("form发生了submit事件,携带数据为:") console.log(e.detail.value) }, onReset() { console.log("form发生了reset事件,表单已被重置") }})
輸入測試資料後點選註冊按鈕觸發表單提交事件。
1.6 radio
<radio></radio>
為單選框組件,往往需配合<radio></radio>
標籤嵌套在<radio-group></radio-group>
當中。
<radio-group></radio-group>
元件屬性如下:
<radio></radio>
#元件屬性如下:
radio.wxml
<view> <view>14.radio小案例</view> <view>利用for循环批量生成</view> <radio-group> <block> <radio></radio>{{item.value}} </block> </radio-group></view>
radio.js
Page({ data: { radioItems: [ { name: 'tiger', value: '老虎' }, { name: 'elephant', value: '大象' }, { name: 'lion', value: '狮子', checked: 'true' }, { name: 'penguin', value: '企鹅' }, { name: 'elk', value: '麋鹿' }, { name: 'swan', value: '天鹅' }, ] }, radioChange:function(e) { console.log("radio发生change事件,携带value值为:", e.detail.value) }})
1.7 slider
<slider></slider>
為滑動選擇器,用於視覺化地動態改變某變數地取值。屬性表如下:
slider.wxml
<view> <view>15.slider小案例</view> <view>(1)滑动条右侧显示当前进度值</view> <slider></slider> <view>(2)自定义滑动条颜色与滑块样式</view> <slider></slider> <view>(3)禁用滑动条</view> <slider></slider> <view>(4)增加滑动条监听事件</view> <slider></slider></view>
1.8 switch
<switch></switch>
为开关选择器,常用于表单上地开关功能,属性表如下所示。
switch.wxml
<view> <view>16.switch小案例</view> <view>增加switch事件监听</view> <switch></switch> <switch></switch></view>
1.9 textarea
<textarea></textarea>
为多行输入框,常用于多行文字的输入。
2、实训小案例–问卷调查
survey.wxml
<view> <form> <view>1.你现在大几?</view> <radio-group> <radio></radio>大一 <radio></radio>大二 <radio></radio>大三 <radio></radio>大四 </radio-group> <view>2.你使用手机最大的用途是什么?</view> <checkbox-group> <label><checkbox></checkbox>社交</label> <label> <checkbox></checkbox>网购</label> <label> <checkbox></checkbox>学习</label><label> <checkbox></checkbox>其他</label> </checkbox-group> <view>3.平时每天使用手机多少小时?</view> <slider></slider> <view>4.你之前有使用过微信小程序吗?</view> <radio-group> <radio></radio>无 <radio></radio>有 </radio-group> <view>5.谈谈你对微信小程序未来发展的看法</view> <textarea></textarea> <button>提交</button> <button>重置</button> </form></view>
survey.js
Page({ universityChange: function (e) { console.log("你选择的现在大几:", e.detail.value) }, mobilChange: function (e) { console.log("你选择使用手机的最大用途是:", e.detail.value) }, timechange: function (e) { console.log("你选择的每天使用手机的时间是:", e.detail.value + "小时") }, programChange: function (e) { console.log("你选择的是否使用过微信小程序:", e.detail.value) }, onSubmit(e) { console.log("你输入的对小程序发展前途的看法是:"+e.detail.value.textarea) }, onReset() { console.log("表单已被重置") }})
【相关学习推荐:小程序学习教程】
以上是歸納整理微信小程式常用表單元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

WebStorm Mac版
好用的JavaScript開發工具

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 Linux新版
SublimeText3 Linux最新版

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。