效果图
项目结构:
index.wxml
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section ">
<view>switch</view>
<switch name="switch"/>
</view>
<view class="section ">
<view class="">slider</view>
<slider name="slider" show-value ></slider>
</view>
<view class="section">
<view class="">input</view>
<input name="input" placeholder="please input here" />
</view>
<view class="section">
<view class="">radio</view>
<radio-group name="radio-group" class="column">
<label><radio value="radio1"/>radio1</label>
<label><radio value="radio2"/>radio2</label>
</radio-group>
</view>
<view class="section">
<view class="">checkbox</view>
<checkbox-group name="checkbox" class="column">
<label><checkbox value="checkbox1"/>checkbox1</label>
<label><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<view class="btn_area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
index.xwss
.section{
background-color: yellow;
margin-top: 30px
}
.btn_area{
margin-top: 20px;
}
.column{
display: flex;
flex-direction: column;
}
index.js
Page({
formSubmit: function (e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value)
},
formReset: function () {
console.log('form发生了reset事件')
},
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
源码下载:http://download.csdn.net/download/zhaihaohao1/9968483