微信小程序 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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
单元选择合并变色示例代码
May 26 Javascript
js实现div弹出层的方法
Nov 20 Javascript
jQuery简单实现日历的方法
May 04 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 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
php目录拷贝实现方法
2015/07/10 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
javascript引导程序
2008/10/26 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
js实现分页功能
2017/05/24 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
浅谈python可视化包Bokeh
2018/02/07 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python手写均值滤波
2020/02/19 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
报关员个人职业生涯规划书
2014/03/12 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
机关会计岗位职责
2014/04/08 职场文书
安全责任书模板
2014/07/22 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
幼儿教师个人总结
2015/02/05 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
golang正则之命名分组方式
2021/04/25 Golang