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

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


相关推荐

  • js获取时间进行比较

    js获取时间进行比较现象 js 中获取时候进行比较方法 js 获取时间 昨天的时间 varday1 newDate day1 setTime day1 getTime 24 60 60 1000 vars1 day1 getFullYear day1 getMonth 1 day1 getDate 今天的时间 varday2 new

    2025年9月22日
    2
  • AQS源码分析[通俗易懂]

    AQS源码分析[通俗易懂]概述当我们提到juc包下的锁,就不得不联系到AbstractQueuedSynchronizer这个类,这个类就是大名鼎鼎的AQS,AQS按字面意思翻译为抽象队列同步器,调用者可以通过继

    2022年8月16日
    17
  • 警察面试真题及答案_接口测试面试题及答案

    警察面试真题及答案_接口测试面试题及答案一、前言接口测试最近几年被炒的火热了,越来越多的测试同行意识到接口测试的重要性。接口测试为什么会如此重要呢?主要是平常的功能点点点,大家水平都一样,是个人都能点,面试时候如果问你平常在公司怎么测试的,你除了说点点点,还能说什么呢,无非就是这个项目点完了点那个项目,这就是为什么各行各业的只要手指能点得动的人都来转行软件测试了。面试的时候面试官希望你除了点点点,还能更深入一点的思考页面上看不到…

    2022年9月29日
    3
  • 狗网skinsdog CSGO开箱子网站支持直接取回,全新任务系统上线

    狗网skinsdog CSGO开箱子网站支持直接取回,全新任务系统上线skinsdog狗网CSGO饰品皮肤开箱网站可直接取回狗网skinsdogCSGO开箱子网站支持直接取回,全新任务系统上线官方链接:skinsdog.cc注册登录自动免费获得$0.8美金推广码:csgogo(注册使用送0.8美金)支付:微信支付宝状态:直接取回…

    2022年9月27日
    3
  • Pycharm提示 Unresolved reference 的解决办法[通俗易懂]

    Pycharm提示 Unresolved reference 的解决办法[通俗易懂]有时候a.py和b.py在一个目录里面,但是在a.py种写importb有时会提示Unresolvedreference,Pycharm常见,解决办法是setting->Project->Projectstructure->Source,点击要加入的文件夹.注意:添加成功之后该文件见的图标会编程蓝色(加入之前是淡蓝色中间一个圆圈)如上图所示。…

    2022年8月27日
    4
  • php7开启强类型模式

    php7开启强类型模式

    2021年10月30日
    52

发表回复

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

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