页面逻辑是,在小程序复选框列表页面上单独放一个复选框用于全选(设置class为position: fixed;即可固定在页面上),当点击全选时,页面所有复选框都会勾上,再次点击后页面所有复选框的打√都会取消。
思路很简单,因为每条数据加了checked属性,因此复选框“全选”通过bindchange监听变化即可。当用户点击“全选”打勾时,通过check-group的bindchange函数对每条数据的checked属性赋值true,取消全选即全部赋为false,赋值方法使用setData实现页面更新。
wxml:
js:
data:
bindchange函数:
注:虽然res.detail.value是字符串类型,但由于等值符==的类型转换,会自动转换成数字进行比较。
个人踩坑有:(个人记录,可不看)
因为数据并不是写死的,而是数据库里读出来的。一开始思路很清晰,但是就是实现不了,报的错也只是某个参数无定义,排查不出问题来。而查阅的其他人的博客又对比不出问题,云里雾里地绕了半天。
一开始以为每点击一下刷新页面要重新交互一下后台获取数据,其实不用,setData就可以实现页面刷新。另一个问题是,checkgroup的bindchange函数只能传递字符串,因此在data内需定义一个属性allCheck保存“全选”框的状态值,但不知道为啥打印出来的allCheck都是默认值,但还是能成功实现if的判断,这点我确实想不通…