当前位置: 首页 > 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端获取不到这个绑定的值?

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

微信小程序事件绑定

http://www.lryc.cn/news/404422.html

相关文章:

  • Kudu节点数规划
  • flutter 充电气泡
  • 【C++】deque以及优先级队列
  • 手机如何播放电脑的声音?
  • 系统架构设计师教程 第3章 信息系统基础知识-3.6 办公自动化系统(OAS)-解读
  • 解决Element UI 表格组件懒加载数据刷新问题
  • 【系统架构设计 每日一问】二 MySql主从复制延迟可能是什么原因,怎么解决
  • Ubuntu Grub引导优化
  • 第3关 -- Git 基础知识
  • AttributeError: ‘WebDriver‘ object has no attribute ‘find_element_by_xpath‘
  • 题解:小S与机房里的电脑 Computer_C++算法竞赛_贪心_二分答案_模拟_数据结构
  • Python @staticmethod、super().__init__()和self
  • Linux网络:应用层协议HTTP(一)
  • Tomcat底层原理
  • 【Linux】Linux环境设置环境变量操作步骤
  • C语言:键盘录入案例
  • Nginx 中如何实现请求的排队机制?
  • synergy配置
  • Qt开发网络嗅探器03
  • 抖音短视频seo矩阵系统源码开发技术分享(二)--SaaS开源
  • git-常用基础指令
  • Inconsistent Query Results Based on Output Fields Selection in Milvus Dashboard
  • 视觉巡线小车——STM32+OpenMV
  • 升级TrinityCore 服务器硬件
  • NVidia 的 gpu 开源 Linux Kernel Module Driver 编译 安装 使用
  • win7显卡驱动更新后msvcp140.dll丢失的解决方法
  • (11)Python引领金融前沿:投资组合优化实战案例
  • git删除本地远程分支
  • 前端-04-VScode敲击键盘有键入音效,怎么关闭
  • JMeter数据库连接操作及断言