给小程序添加新的功能遇到一个问题,需要点击CheckBox来修改某个数组里某一项的值。

因为我自己平时有时候会手机备忘录记一点,电脑便签记一点,所以打算给我的小程序【口袋趣屋】添加一个类似于todo的功能。。

动态修改数组

大概类似这样的一个列表

image.png

右边是一个switch, checkbox类型。

点击勾选之后,首先更新数据库,然后更新页面的data。

数据的结构是这样的:
image.png

done为true 的时候就是选中,done 为false的时候表示没有完成。

      db.collection('user_todo_record').doc(id).update({
        data: {
          done: false
        },
        success: function (res) {
          console.log(res)
          let temp = 'content[' + index + '].done'   // 利用这个来表示,就能实现更改数组里的某一项的数据了
          that.setData({
            [temp]: false,
	  // 直接在这个位置写content[index].done 的话,会提示错误,不能识别
          })
        }
      })

wxs

参考: 官方文档

利用wx:for 渲染数组的时候,我想根据数组里的元素的id是否在另一个数组里来判断单选框是否处于选中状态。

小程序页面的语法是不支持直接indexOf的,所以需要使用wxs。

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。

// array.wxs

function defineIndexOf(str, val) {
  return str.indexOf(val);
}
module.exports = {
  indexOf: defineIndexOf
}
<wxs src="array.wxs" module="arrayTool" />

<switch type="checkbox" value="{{item._id}}" checked="{{arrayTool.indexOf(today_info, item._id) > -1?true:''}}" bindchange="todoCom" data-id="{{item._id}}"/>