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

微信小程序–单选复选按钮组的实现本文主要介绍微信小程序单选按钮很多选按钮的实现方式。众所周知,小程序目前无法绑定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++)
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • kafka 查看topic offset_kafka重置offset

    kafka 查看topic offset_kafka重置offset版本信息Kafka0.8.2,JDK1.7问题现象最近我们在生产环境执行删除无用的kafkatopic的操作时,因为错误的按照8.2版本之前的删除方式操作8.2.2版本的kafka,导致删除过程异常,删除后出现consumer正在消费的其他正常topic的partition的offset值偏移的情况,导致大量消息重复消费,并且产生连锁反应,给我们的系统稳定性产生明显影响。如下日志所示,正常情况…

    2022年10月10日
  • 关于我转生变成史莱姆这档事_kicker.de

    关于我转生变成史莱姆这档事_kicker.de1  请问什么所kworker进程 清理旧版本的软件缓存:  sudoapt-getautoclean这个进程是干什么的? 我的机器刚装11.04没次卡的时候top一下就发现kworker这个进程占用CPU很大,基本上都能到75%左右youmaytrytodisableallpowersavingcon

  • mpu9250输出的数据是啥(r语言读取excel数据)

    MPU9250对初始数据的读取1.mpu9250介绍MPU9250是一款9轴运动跟踪装置,他在小小的3X3X1mm的封装中融合了3轴加速度、3轴陀螺仪、3轴磁力计以及数字运动处理器(DMP)并且兼容MPU6515。其完美的I2C方案,可直接输出9轴的全部数据。因此它也是四轴姿态解算的基础,所以正确获取MPU9250的原始数据显得尤为重要。注意:1.但…

  • ueditor使用注意事项

    ueditor使用注意事项

  • 移动通信网络架构[通俗易懂]

    移动通信网络架构[通俗易懂]帮大家梳理一下无线侧接入网+承载网+核心网的架构,这里以接入网为主,其他两个网络的很多技术细节由于笔者研究的并不足够深入,因此以帮助大家入门为主。在我们正式讲解之前,我想通过这张网络简图帮助大家认识一下全网的网络架构,通过对全网架构的了解,将方便您对后面每一块网络细节的理解。这张图分为左右两部分,右边为无线侧网络架构,左边为固定侧网络架构。无线侧:手机或者集团客户通过基站接入到无线接入网,在接入网侧可以通过RTN或者IPRAN或者PTN解决方案来解决,将信号传递给BSC/RNC。在将信号..

  • java 字符 几个字节_java中字符串占几个字节「建议收藏」

    java 字符 几个字节_java中字符串占几个字节「建议收藏」首先,char为Java的基本类型,基本类型所占的字节数是固定的,如int占4字节,double占8字节,这可以使得Java在不同的平台上所占类型固定,很好地保证了Java的可移植性。因此,Java中char类型固定占2个字节。(注:char类型也可以存储一个汉字)。其次,String采用一种更灵活的方式进行存储。在String中,一个英文字符占1个字节,而中文字符根据编码的不同所占字节数也不同。…

发表回复

您的电子邮箱地址不会被公开。

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