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

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

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

});

实现效果:

更多:

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

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

微信小程序事件绑定

相关推荐
HerayChen2 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘6 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡9 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼12 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857515 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027715 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__21 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN2 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节