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

微信小程序–单选复选按钮组的实现本文主要介绍微信小程序单选按钮很多选按钮的实现方式。众所周知,小程序目前无法绑定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)
上一篇 2022年5月7日 下午4:20
下一篇 2022年5月7日 下午4:20


相关推荐

  • OpenClaw + MCP:让 AI 助手连接任意工具的终极方案

    OpenClaw + MCP:让 AI 助手连接任意工具的终极方案

    2026年3月14日
    2
  • Windows技术篇——进程、线程、消息机制进程间通信[通俗易懂]

    Windows技术篇——进程、线程、消息机制进程间通信[通俗易懂]概念192.168.0.1–192.168.0.255一、进程状态1、创建状态:进程由创建而产生。2、就绪状态:指进程已准备好运行状态,即进程已分配到除CPU以外所有的必要资源后,只要再获得CPU,合可立即执行。(有执行资格,没有执行权的进程)3、运行状态:指进程已经获取CPU,其进程处于正在执行的状态。(既有执行资格,又有执行权的进程)4、阻塞状态:指正在执行的进程由于发生某事件(如…

    2022年8月18日
    16
  • 什么是ADO.NET

    什么是ADO.NET

    2021年7月31日
    59
  • System.err.println()和System.out.println()区别

    System.err.println()和System.out.println()区别看了些资料总结下:1.JDK文档对两者的解释:out:“标准”输出流。此流已打开并准备接受输出数据。通常,此流对应于显示器输出或者由主机环境或用户指定的另一个输出目标。err:“标准”错误输出流。此流已打开并准备接受输出数据。通常,此流对应于显示器输出或者由主机环境或用户指定的另一个输出目标。按照惯例,此输出流用于显示错误消息,或者显示那些即使用户输出流(变量 out 的值)已经重定向…

    2022年6月13日
    33
  • PMS 分析

    PMS 分析深入分析 PowerManager nbsp nbsp 深入分析 BatteryServi 和 BatteryStats 本章所涉及的源代码文件名及位置 nbsp nbsp PowerManager Javaframewor base services java com android server PowerManager java nbsp nbsp com and

    2026年3月17日
    2
  • 性能监控工具-JDK性能监控

    性能监控工具-JDK性能监控JDK 性能监控工具 jdk 开发包中 除了比较熟悉的 java exe javac exe 还有一系列的辅助工具 它们都存放在 jdk 安装目录 bin 目录下 乍一看这些都是 exe 但实际上它们只是将 java 程序的一层包装 真正的实现是在 lib tools jar 中 以 jps 命令为例 它实质上是运行 java classpath JAVA HOME lib tools jarsun

    2026年3月26日
    2

发表回复

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

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