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

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

相关推荐

  • 下标越界的解决方法「建议收藏」

    下标越界的解决方法「建议收藏」如果使用数组时,数组的下标超出数组的可取值范围就会出现这个错误,这个数组可以是自定义的也可以是系统自带的。1.自定义数组:dimarr1(1to5)arr1(10)=555因为arr1数组为1到5,这里却是10,所以就会报下标越界错误。2.系统自带的数组:一个excel工作表表有3张SheetSub下标越界() MsgBoxSheets(4).N

  • 七. 200多万元得到的创业教训–周鸿祎传授的“活法”

    七. 200多万元得到的创业教训–周鸿祎传授的“活法”

  • windows命令行查看盘符列表_命令提示符怎么切换目录

    windows命令行查看盘符列表_命令提示符怎么切换目录1、windows系统使用快捷键:WIN+R,调出运行命令窗口,并输入CMD,回车进入dos界面:如下图所示:如上图所示可以看出我我所在目录是在C盘,现在我想要切换到D盘的某一个指定目录下,如:D:\software\back\java\tools\RabbitMQ\rabbitmq_server-3.7.3步骤1如下及步骤配图:相关命令#先从C盘切换至D盘

    2022年10月15日
  • cmd跑绿色代码_cmd装逼代码-cmd命令,装逼

    cmd跑绿色代码_cmd装逼代码-cmd命令,装逼本教程分享:《cmd装逼代码》如何使用命令提示符装逼事先声明,如果你不知道打开windows的命令行工具,我是绝对不会告诉你是用windows+R,然后键入cmd打开的windows自带的命令行工具很强大,毕竟计算机一开始都是以键入命令的方式来操作的,但现如今计算机的发展,许多在过去需要去记大量命令才能完成的操作,现如今通过傻瓜式的点选都可以完成。作为一名有逼格的程序员,在计算机如今图形界面…

  • layer 弹出层传递参数

    layer 弹出层传递参数layer弹出层轻量好用,一直喜欢用,但是却没有弹出层传参的接口,迫于无奈只能Url地址传参,总所周知,这个可是限制大小的,百度一番,看看大神们怎么处理,结果就感觉所有回答都是Ctrl+C加Ctrl+V,全是地址栏传参,页面缓存、cookie、localstorage,本着不甘心的原则,就想为什么不能在open的时候把参数一起作为属性传递了,强行看了layer源码(扒光慢慢看),于是乎…

发表回复

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

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