微信小程序 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 相关文章推荐
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
js实现图片放大展示效果
Aug 30 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
express.js中间件说明详解
Mar 19 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
pandas 将索引值相加的方法
2018/11/15 Python
python for 循环获取index索引的方法
2019/02/01 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
使用Python实现画一个中国地图
2019/11/23 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
物业招聘计划书
2014/01/10 职场文书
装修活动策划方案
2014/08/27 职场文书
学风建设演讲稿
2014/09/12 职场文书
超市工作总结范文2014
2014/12/19 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python