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

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


相关推荐

  • set a date for_setcallback

    set a date for_setcallbacksetTimeout只在指定时间后执行一次functionhello(){alert(“hello”);}//使用方法名字执行方法vart1=window.setTimeout(hello,1000);vart2=window.setTimeout(“hello()”,3000);//使用字符串执行方法window.clearTimeout(t1);//去掉定时器setTimeInterval//实时刷新时间单位为毫秒setInterv

    2022年10月5日
  • apache struts2漏洞 但是系统没有用_tomcat ajp漏洞

    apache struts2漏洞 但是系统没有用_tomcat ajp漏洞0x00前言ApacheStruts是美国阿帕奇(Apache)软件基金会负责维护的一个开源项目,是一套用于创建企业级JavaWeb应用的开源MVC框架,主要提供两个版本框架产品:Struts1和Struts2。Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Contro

    2022年9月14日
  • hdparm

    “hdparm”(即硬盘参数)是Linux的命令行程序之一,用于处理磁盘设备和硬盘。借助此命令,您可以获得有关硬盘,更改写入间隔,声学管理和DMA设置的统计信息。它还可以设置与驱动器…

    2022年4月4日
  • Servlet学习笔记-Servlet工作原理和过程

    Servlet学习笔记-Servlet工作原理和过程1、前言  JavaServlet技术简称Servlet技术,是Java开发Web应用的底层技术。由Sun公司于1996年发布,用来代替CGI——当时生成Web动态内容的主流技术。官方文档对Servlet的概述,请参考《Servlet的概述》。2、关键词ServletServlet是JavaEE规范的一种,主要是为了扩展Java作为Web服务的功能。为了方便第三方准守这种规范,Sun公…

    2022年10月5日
  • 树莓派学习-I2c通信

    树莓派学习-I2c通信前言由于之前参加了学校的飞兆杯的比赛,题目是循迹小车,由于缺乏对于ldc1314芯片使用知识以及个人的能力原因,项目并没有做出来,但是还是学习了很多东西的。其中以树莓派的I2C通信为最。一、I2C简介I2C(Inter-IntegratedCircuit)总线是由PHILIPS公司开发的两线式串行总线,用于连接微控制器及其外围设备。是微电子通信控制领域广泛采用的一种总线标准。它是同步通信的一种特殊

    2022年5月11日
  • 5g 云游戏_5G切片认证

    5g 云游戏_5G切片认证随着5G网络的快速部署和商用,5G与垂直行业应用的结合也日益紧密。因此,具备5G特性的网络能力将打造持续升级的业务体验,不断提升客户服务质量。2020年,5G即将进入SA(独立组网)规模商用部署期。作为一项5GSA的专属技术,网络切片所提供的面向差异化应用的网络定制化和专属保障能力,将使5G网络最大程度地提升用户体验方面的价值潜力。在互联网应用领域,业界普遍认为5G技术的成熟和商用将带来云游戏、在线视频直播等互联网价值应用的爆发。5G端到端切片技术能够有效支撑OTT多业务应用场景的需求并提供定制化的体验保

    2022年10月2日

发表回复

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

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