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

最新推荐文章于 2024-02-23 13:20:24 发布

zhaihaohao1

最新推荐文章于 2024-02-23 13:20:24 发布

阅读量626

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/77881690

版权

微信小程序专栏收录该内容

19 篇文章 0 订阅

订阅专栏

效果图

项目结构：

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