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

微信小程序–单选复选按钮组的实现本文主要介绍微信小程序单选按钮很多选按钮的实现方式。众所周知,小程序目前无法绑定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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • TOF相机总结[通俗易懂]

    TOF相机总结[通俗易懂]转载也要顶! 关于tof相机很好的总结~  2013-05-1113:22:30|  分类:默认分类|  标签:|字号大中小 订阅1.1TOF初探   TOF是Timeofflight的简写,直译为飞行时间的意思。所谓飞行时间法3D成像,是通过给目标连续发送光脉冲,然后用传感

    2022年5月26日
    31
  • 安卓小技巧

    安卓小技巧

    2021年9月9日
    57
  • 打印小册子中断了怎么办呢_pdf小册子双面打印

    打印小册子中断了怎么办呢_pdf小册子双面打印在这里可以首先分享下针对小册子的打印方法,像wps针对pdf就提供打印小册子的设置,对于支持双面打印的打印机,小册子子集选择双面即可,而针对只能打单面的打印机,也不要慌,可以分两次打,先选择打正面,在选择打背面即可。这时候问题来了,如果打印的特别多,出现意外中断,比如没墨了,没纸了,很容易打印机无法暂存打印,打印任务就消失了,气的人想吐血。难道真的没有办法了么,…

    2025年9月18日
    14
  • iscsiadm 命令的总结「建议收藏」

    iscsiadm 命令的总结「建议收藏」iscsiadm的命令汇总1.发现iscsi存储:iscsiadm-mdiscovery-tst-pISCSI_IP2.查看iscsi发现记录iscsiadm-mnode3.删除iscsi发现记录iscsiadm-mnode-odelete-TLUN_NAME-pISCSI_IP4.登录iscsi存储…

    2022年8月22日
    9
  • SAP HANA中创建与时间相关的数据及Time Attribute View(Fiscal)

    SAP HANA中创建与时间相关的数据及Time Attribute View(Fiscal)

    2021年8月23日
    87
  • 嵌入式linux基础学习全套精品视频教程

    嵌入式linux基础学习全套精品视频教程嵌入式linux基础学习全套精品视频教程在给大家分享教程之前,首先给大家简要的介绍一下嵌入式linux,嵌入式linux是将日益流行的Linux操作系统进行裁剪修改,使之能在嵌入式计算机系统上运行的一种操作系统。嵌入式linux既继承了Internet上无限的开放源代码资源,又具有嵌入式操作系统的特性。本教程是嵌入式linux基础学习全套精品视频教程,比较适合嵌入式初级学员们学习,需要

    2022年5月16日
    50

发表回复

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

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