欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
南京小程序开发公司是如何通过微信小程序实现的复选框效果
来源:南京网站制作 时间:2019-05-21 09:00:56

在本文中,南京小程序开发公司将分享了微信小程序中显示复选框的具体代码供您参考。详情如下所示。

在样式部分,您可以自由发挥。无论如何,这里没有任何内容。选中并取消选中它并使用它。数据。arrStatus [检查索引]直接判断它,你以后会理解它。
 
效果预览:
 
部分JS
 
// page/index/index.js
Page({
 /**
  * Initial data of pages
  */
 data: {
  items: [
   {name:'USA', value:'USA'},
   {name:'CHN', value:'China'},
   {name:'BRA', value:'Brazil'},
   {name:'JPN', value:'Japan'},
   {name:'ENG', value:'UK'},
   {name:'TUR', value:'France'},
  ],
  arr: [],
  arrStatus: []
 },
 
 check: function (e) {
  // Gets the currently selected value
  var checkValue = e.currentTarget.dataset.val;
  // Gets the currently selected subscript
  var checkIndex = e.currentTarget.dataset.index;
  // The currently selected negative value
  this.data.arrStatus[checkIndex] = !this.data.arrStatus[checkIndex];
  if (this.data.arrStatus[checkIndex]) {
   // If the current state is selected, insert the value into the array
   this.data.arr.push(checkValue);
  }else{
   // If the current state is unchecked, delete the value from the array and return a new array
   for (var i in this.data.arr) {
    if (this.data.arr[i] == checkValue) {
     this.data.arr.splice(i);
    }
   }
  }
  // Print the currently selected data
  console.log(this.data.arr);
 },
 
 /**
  * Life Cycle Function -- Listening for Page Loading
  */
 onLoad: function (options) {
  // Set the status of each data in the array
  for (var i in this.data.items) {
   this.data.arrStatus[i] = false;
  }
 },
})
wxml部分:
 
<block wx:for ='{{items}}'> 
  <text data-index ='{{index}}'data-val ='{{item.value}}'catchtap ='check'> {{item。 value}} </ text> 
</ block>
 
以上是本文的全部内容。我希望它对每个人的学习都有所帮助,我希望你能更多地支持南京小程序开发公司

本文地址:http://www.ccdiya.com/web/2504.html
Tag:
专业服务:南京网站制作,南京网站制作公司,南京网站建设公司
联系电话:025-65016872
上一篇: 被遗忘的搜索引擎优化任务提升排名
下一篇: 返回列表
最新案例
泰杰赛
泰杰赛
苏派教育
苏派教育
全国大学生公共卫生大赛
全国大学生公共卫生大赛
南京德普筒仓建安工程宏图棋牌官网
南京德普筒仓建安工程宏图棋牌官网
中国非金属材料南京矿山工程宏图棋牌官网
中国非金属材料南京矿山工程宏图棋牌官网
你可能感兴趣
Facebook算法的变化如何影响您的业务
您应该为在线商店撰写博客的7个理由
2019年制定视频营销战略的7个步骤
2019年的营销趋势我们非常关注
您的电子商务商店可以从亚马逊学到什么?
了解SEO的WordPress博客标签
非营利网站的筹款技巧
SEO审核清单:您应该寻找什么?
最后更新
南京小程序开发公司是如何通过微信小程序实现的复选框效果 被遗忘的搜索引擎优化任务提升排名 什么是推荐的2019年页面加载时间? 使用面包屑导航改善用户体验的方法 南京小程序开发公司教你实现微信小程序星级评价效果 南京小程序开发说说微信小程序中时间控制选择器视图的详细用法 提高回访率的5种方法 SEO更新:谷歌元描述长度
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例
满源彩票充值 双赢彩票娱乐 江苏快3官网 2m彩票官网 139彩票充值 江苏快3 江苏快3 河北快3走势图 河北快3走势图 汇丰彩票充值中心