微信小程序----组件之form

来源：互联网发布：手机淘宝登录电脑版编辑：程序博客网时间：2024/06/05 05:25

效果图

项目结构：

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

阅读全文

0 0