微信小程序–单选复选按钮组的实现

微信小程序–单选复选按钮组的实现本文主要介绍微信小程序单选按钮很多选按钮的实现方式。众所周知,小程序目前无法绑定DOM截点,实现的原理就是通过bindtap点击的事件方法获取data-id进行循环遍历取反而实现该效果。(一)单选按钮组模型图如下:index.jsPage({data:{parameter:[{id:1,name:’银色’},{id:2,name:’白色’},{i

大家好,又见面了,我是你们的朋友全栈君。

本文主要介绍微信小程序单选按钮很多选按钮的实现方式。众所周知,小程序目前无法绑定DOM截点,实现的原理就是通过bindtap点击的事件方法获取data-id进行循环遍历取反而实现该效果。

(一)单选按钮组

模型图如下:
这里写图片描述
index.js

Page({
  data: {
    parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模拟商品参数数据,如果是线上版本需要自行发起request请求
  },
  onLoad: function (options) {
	 this.data.parameter[0].checked = true;
    this.setData({
      parameter: this.data.parameter,
    })//默认parameter数组的第一个对象是选中的
  },
   // 参数点击响应事件
  parameterTap:function(e){//e是获取e.currentTarget.dataset.id所以是必备的,跟前端的data-id获取的方式差不多
    var that=this
    var this_checked = e.currentTarget.dataset.id
    var parameterList = this.data.parameter//获取Json数组
    for (var i = 0; i < parameterList.length;i++)
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/139625.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • activemq常见面试题(jvm面试题总结及答案)

    是什么消息中间件。可以在分布式系统的不同服务之间进行消息的发送和接收它的出现解决了什么问题可以让系统解耦 比如:使用消息中间件,某一个服务,可能依赖了其他好几个服务。比如课程里面的运营商后台依赖了4个服务,那不用mq就和4个服务耦合,用了mq,就只和1个mq耦合。参考下图: 实际项目应用场景监听商品添加消息,接收消息,将对应的商品信息同步到索引库 每次添加完商品…

    2022年4月10日
    741
  • 基于VUE选择上传图片并在页面显示(图片可删除)

    基于VUE选择上传图片并在页面显示(图片可删除)

    2021年10月11日
    44
  • 构建算法模型_模型与算法有什么不同

    构建算法模型_模型与算法有什么不同文章目录1.情感词典内容2.情感倾向点互信息算法(SO-PMI)算法点互信息算法PMI情感倾向点互信息算法SO-PMI3.构建情感词典1.导入项目2.构建情感种子词3.使用TF-IDF方便构建情感种子词4.构建专业词典的效果与使用方法5.其他说明1.情感词典内容情感词典构建方法归为三类,分别是:词关系扩展法、迭代路径法和释义扩展法情感极性:正向、负向;表示正面情感(开心愉快)或负面情感(伤心愤怒)情感极值:情感倾向(微笑、开怀大笑、手舞足蹈虽然都可以表示开心,但有不一样的

    2022年8月23日
    6
  • phpstorm 官方给的永久激活码2021【注册码】

    phpstorm 官方给的永久激活码2021【注册码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月19日
    115
  • onedrive免费版容量_onedrive永久1t申请

    onedrive免费版容量_onedrive永久1t申请1、打开:http://get365.pw在右上角可以看到临时邮箱的地址复制地址朋友们记得保存地址是登录的账号,(获得临时邮箱地址之后不要关闭页面等下还要获取验证码)2、然后打开https://signup.microsoft.com/signup?sku=student输入临时邮箱地址3、填写信息验证码(验证码打开临时邮箱的页面查看,第一步打开的那个界面,下方可以查看接收到的邮

    2022年9月10日
    1
  • 解决Android平台布局xml文件的error parsing xml unbound prefix错误

    解决Android平台布局xml文件的error parsing xml unbound prefix错误

    2022年3月12日
    47

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号