当前位置: 首页 > news >正文

微信小程序数组绑定使用案例(一)

微信小程序数组绑定案例,修改数组中的值

1.Wxml 代码

<view class="list"><view class="item {{item.ischeck?'active':''}}" wx:for="{{list}}"><view class="title">{{item.name}} <text>({{item.id}})</text></view><view class="btndiv"><button>上移动</button><button bind:tap="downClick" data-index="{{index}}">下移动</button><button bind:tap="delClick" data-index="{{index}}">删除</button><checkbox checked="{{item.ischeck}}" bind:tap="checkClick" data-index="{{index}}">选中</checkbox></view></view>
</view>

2.js 代码

Page({/*** 页面的初始数据*/data: {list: [{id: 1,name: '张三',ischeck: true},{id: 2,name: '李四'},{id: 3,name: '王五'},{id: 4,name: '赵六'},]},//选中点击事件checkClick(e) {var index = e.currentTarget.dataset.index;var list = this.data.list;// console.info(index);//修改页面this.setData({['list[' + index + '].ischeck']: !list[index].ischeck});},//删除delClick(e) {var index = e.currentTarget.dataset.index;var list = this.data.list;list.splice(index, 1);this.setData({list: list});},//下移动downClick(e) {var index = e.currentTarget.dataset.index;var list = this.data.list;var next = index + 1;if (next == list.length) { //临界值//next=0;return;}//交换位置var temp = list[index];list[index] = list[next];list[next] = temp;this.setData({list: list});},/*** 生命周期函数--监听页面加载*/onLoad(options) {}
})

3.css代码忽略

重点解读:可以使用js对象路径方式,修改变量并重新绘制页面

    this.setData({

      ['list[' + index + '].ischeck']: !list[index].ischeck

    });

实现效果:

更多:

input组件 type为nickname pc端获取不到这个绑定的值?

微信小程序触屏事件_上划下划事件

微信小程序事件绑定

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 会Excel就会sql?
  • 【操作系统】定时器(Timer)的实现
  • PY32F002B单片机 ISP 串口下载注意事项
  • 基于GTX的64B66B编码的自定义接收模块(高速收发器二十二)
  • 简化Android数据管理:深入探索SQLite数据库
  • esp8266模块(1)
  • 冒泡,选择,插入,希尔排序
  • 分布式锁的使用场景是什么?有哪些实现方法?
  • Qt创建列表,通过外部按钮控制列表的选中下移、上移以及左侧图标的显现
  • VSCODE 下 openocd Jlink 的配置笔记
  • huawei USG6001v1学习----NAT和智能选路
  • web学习笔记(八十二)uniapp
  • Cisco 路由重发布 —— 实现路由信息在不同路由域间的传递
  • 24暑假算法刷题 | Day18 | LeetCode 530. 二叉搜索树的最小绝对差,501. 二叉搜索树中的众数,236. 二叉树的最近公共祖先
  • 【Vue3】工程创建及目录说明
  • [ JavaScript ] 数据结构与算法 —— 链表
  • 「前端早读君006」移动开发必备:那些玩转H5的小技巧
  • 【前端学习】-粗谈选择器
  • canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字...
  • docker-consul
  • HashMap剖析之内部结构
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • TiDB 源码阅读系列文章(十)Chunk 和执行框架简介
  • 阿里云爬虫风险管理产品商业化,为云端流量保驾护航
  • 从输入URL到页面加载发生了什么
  • 大型网站性能监测、分析与优化常见问题QA
  • 精彩代码 vue.js
  • 理解在java “”i=i++;”所发生的事情
  • 实现简单的正则表达式引擎
  • 腾讯大梁:DevOps最后一棒,有效构建海量运营的持续反馈能力
  • 我这样减少了26.5M Java内存!
  • 项目实战-Api的解决方案
  • 一个6年java程序员的工作感悟,写给还在迷茫的你
  • 机器人开始自主学习,是人类福祉,还是定时炸弹? ...
  • #快捷键# 大学四年我常用的软件快捷键大全,教你成为电脑高手!!
  • #周末课堂# 【Linux + JVM + Mysql高级性能优化班】(火热报名中~~~)
  • (C++哈希表01)
  • (function(){})()的分步解析
  • (LNMP) How To Install Linux, nginx, MySQL, PHP
  • (Spark3.2.0)Spark SQL 初探: 使用大数据分析2000万KF数据
  • (第三期)书生大模型实战营——InternVL(冷笑话大师)部署微调实践
  • (附源码)ssm基于web技术的医务志愿者管理系统 毕业设计 100910
  • (附源码)计算机毕业设计SSM保险客户管理系统
  • (一)VirtualBox安装增强功能
  • (原創) 如何將struct塞進vector? (C/C++) (STL)
  • (转) 深度模型优化性能 调参
  • (转)C语言家族扩展收藏 (转)C语言家族扩展
  • (转)es进行聚合操作时提示Fielddata is disabled on text fields by default
  • .mat 文件的加载与创建 矩阵变图像? ∈ Matlab 使用笔记
  • .mkp勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET C# 使用GDAL读取FileGDB要素类
  • .net core 控制台应用程序读取配置文件app.config
  • .NET Core中如何集成RabbitMQ
  • :“Failed to access IIS metabase”解决方法