微信小程序 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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
jQuery表单验证之密码确认
May 22 jQuery
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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
destoon数据库表说明汇总
2014/07/15 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
Python版的文曲星猜数字游戏代码
2013/09/02 Python
python实现中文转换url编码的方法
2016/06/14 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
Python异常处理知识点总结
2019/02/18 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
python 字典的打印实现
2019/09/26 Python
python实现数字炸弹游戏
2020/07/17 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
百货商场楼层班组长竞聘书
2014/03/31 职场文书
大学生社会实践方案
2014/05/11 职场文书
环境卫生倡议书
2014/08/29 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
停发工资证明范本
2015/06/12 职场文书
整脏治乱工作简报
2015/07/21 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技