微信小程序 checkbox使用实例解析


Posted in Javascript onSeptember 09, 2019

这篇文章主要介绍了微信小程序 checkbox使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果图如下:

微信小程序 checkbox使用实例解析

实例代码如下:

type_add.js

// pages/detail_add/detail_add.js
Page({

 /**
  * 页面的初始数据
  */
 data: {
  selectData: "", //下拉列表的数据
  height: 20,
  focus: false
 },
 checkboxChange: function(e) {
  console.log('checkbox发生change事件,携带value值为:', e.detail.value)
  console.log("长度:" + e.detail.value.length);
  this.setData({
   typeId: e.detail.value,
   length: e.detail.value.length
  })


 },
 formSubmit: function(e) {
  console.log('form发生了submit事件,携带数据为:' + e.detail.value.amount + ", " + e.detail.value.typeId + ", " + this.data.remark + ", " + this.data.date + ", " + this.data.time);

  var amount = e.detail.value.amount;
  var typeId = this.data.typeId;

  var date = this.data.date;
  var time = this.data.time;
  var remark = e.detail.value.remark;
  var createDate = date + " " + time;
  var length = this.data.length;
  console.log("length:" + length);
  console.log("date:" + date);
  console.log("time:" + time);
  console.log("createDate:" + createDate)

  if (amount == null || amount == "") {
   wx.showToast({
    title: "支出金额不能为空",
    icon: 'none',
    duration: 1500
   })
  } else if (typeId == null || typeId == "") {
   wx.showToast({
    title: "支出类型不能为空",
    icon: 'none',
    duration: 1500
   })

  } else if (length >= 2) {
   wx.showToast({
    title: "支出类型只能选择一种",
    icon: 'none',
    duration: 1500
   })
  } else if (date == null || date == "") {
   wx.showToast({
    title: "日期不能为空",
    icon: 'none',
    duration: 1500
   })
  } else if (time == null || time == "") {
   wx.showToast({
    title: "时间不能为空",
    icon: 'none',
    duration: 1500
   })
  } else if (remark == null || remark == "") {
   wx.showToast({
    title: "备注不能为空",
    icon: 'none',
    duration: 1500
   })
  } else {



   wx.request({

    url: getApp().globalData.urlPath + "spendingDetail/add",
    method: "POST",
    data: {
     amount: amount,
     typeId: typeId,
     createDate: createDate,
     remark: remark
    },
    header: {
     "Content-Type": "application/x-www-form-urlencoded"
    },
    success: function(res) {
     console.log(res.data.code);
     if (res.statusCode == 200) {

      //访问正常
      if (res.data.code == "000000") {
       wx.showToast({
        title: "添加支出详情成功",
        icon: 'success',
        duration: 3000,
        success: function() {

         wx.navigateTo({
          url: '../detail/detail'
         })
        }
       })

      }
     } else {

      wx.showLoading({
       title: '系统异常',
       fail
      })

      setTimeout(function() {
       wx.hideLoading()
      }, 2000)
     }

    }
   })
  }


 },
 formReset: function() {
  console.log('form发生了reset事件')
 },
 bindDateChange: function(e) {
  console.log('picker发送选择改变,携带值为', e.detail.value)
  this.setData({
   date: e.detail.value
  })
 },
 bindTimeChange: function(e) {
  console.log('picker发送选择改变,携带值为', e.detail.value)
  this.setData({
   time: e.detail.value
  })
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {
  wx.setNavigationBarTitle({

   title: "添加支出详情"

  })


  var userCode = wx.getStorageSync('userId').toString();
  var self = this;
  wx.request({
   url: getApp().globalData.urlPath + "spendingType/types", //json数据地址 
   data: {
    userCode: userCode
   },
   headers: {
    "Content-Type": "application/x-www-form-urlencoded"
   },
   success: function(res) {
    console.log("res.data.data.typeName:" + res.data.data)

    self.setData({

     selectData: res.data.data

    })


   }
  })
 },

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function() {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function() {

 },

 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function() {

 },

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function() {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function() {

 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function() {

 },

 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function() {

 }
})

type_add.wxml:

<form bindsubmit="formSubmit" bindreset="formReset">
 <view class="section">
  <text>支出金额</text>
  <input name="input" name="amount" placeholder="请输入支出金额" />
 </view>

 <view class="section">
  <text>支出类型</text>
  <checkbox-group bindchange="checkboxChange">
   <label class="checkbox" wx:for="{{selectData}}">
    <checkbox value="{{item.typeId}}" checked="{{item.checked}}" />{{item.typeName}}
   </label>
  </checkbox-group>

 </view>

 <view>
  <text>创建时间</text>
  <view class="section">
   <picker mode="date" value="{{date}}" start="2018-09-01" end="2030-09-01" bindchange="bindDateChange">
    <view class="picker">
     选择日期: {{date}}
    </view>
   </picker>
  </view>
  <view class="section">
   <picker mode="time" value="{{time}}" start="00:00=" end="23:59" bindchange="bindTimeChange">
    <view class="picker">
     选择时间: {{time}}
    </view>
   </picker>
  </view>
 </view>
 <view class="section">
  <text>备注</text>
  <input name="input" name="remark" placeholder="请输入备注" />
 </view>
 <view>
  <text>\n</text>
 </view>
 <view class="btn-area">
  <button form-type="submit">提交</button>
  <view>
   <text>\n</text>
  </view>
  <button form-type="reset">重置</button>
 </view>
</form>

bindchange=”checkboxChange” 相当于js中的onchange事件。

上述中的form表单基本就是参考官方文档改的。

有一段代码还是要提一下:

self.setData({
  selectData: res.data.data
 })

self其实相当于this,意为当前。每次触发事件,对应的值都会进行存储,用于与后台通信进行数组传递,

type_add.wxss:

/* pages/login/login.wxss */
form{
 width: 310px;
 height: 240px;
 line-height: 40px;
 /* border: 1px solid red; */
}
input{
 border: 1px solid #ccc;
 width: 310px;
 height: 40px;
}
.button{
 margin-top: 20px;
}
.header text{
 font-size: 25px;
 color: #666;
}
form text{
 font-size: 20px;
 color: #666;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
layui原生表单验证的实例
Sep 09 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
vue实现在线学生录入系统
May 30 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 #Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 #Javascript
一次微信小程序内地图的使用实战记录
Sep 09 #Javascript
微信小程序HTTP请求从0到1封装
Sep 09 #Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 #Javascript
世界上最短的数字判断js代码
Sep 09 #Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 #Javascript
You might like
用ODBC的分页显示
2006/10/09 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
angularjs模态框的使用代码实例
2019/12/20 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
python快速排序代码实例
2013/11/21 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python 查看文件的编码格式方法
2017/12/21 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
python使用插值法画出平滑曲线
2018/12/15 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
助人为乐好少年事迹材料
2014/08/18 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
MySQL多表查询机制
2022/03/17 MySQL
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python