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

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

1.Wxml 代码

html 复制代码
<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 代码

javascript 复制代码
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 }); 实现效果: ![](https://i-blog.csdnimg.cn/direct/ebeb7b4821544a2996b525451f4c8263.png) 更多: ### [input组件 type为nickname pc端获取不到这个绑定的值?](https://blog.csdn.net/u011127019/article/details/139532032 "input组件 type为nickname pc端获取不到这个绑定的值?") ### [微信小程序触屏事件_上划下划事件](https://blog.csdn.net/u011127019/article/details/136416707 "微信小程序触屏事件_上划下划事件") ### [微信小程序事件绑定](https://blog.csdn.net/u011127019/article/details/136416457 "微信小程序事件绑定")

相关推荐
2501_915909063 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_915106323 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915909063 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview
2501_916007473 小时前
苹果软件混淆与 iOS 应用加固实录,从被逆向到 IPA 文件防反编译与无源码混淆解决方案
android·ios·小程序·https·uni-app·iphone·webview
CRMEB系统商城3 小时前
CRMEB多商户系统(PHP)v3.3正式发布,同城配送上线[特殊字符]
java·开发语言·小程序·php
前端开发呀7 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
尘似鹤7 小时前
微信小程序学习(六)--多媒体操作
学习·微信小程序·小程序
2501_916008899 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌9 小时前
线上教学小程序:构建高效互动的云端学习空间
学习·小程序
源码_V_saaskw9 小时前
JAVA校园跑腿校园外卖源码校园外卖小程序校园代买帮忙外卖源码社区外卖源码小程序+公众号+h5
java·开发语言·微信小程序·小程序