<view class="report-container"> <van-cell-group> <van-cell use-label-slot wx:for="{{tableData}}" wx:for-item="item" wx:for-index="index"> <van-switch size="50rpx" checked="{{item.reported}}" bind:change="onChange({{index}})" /> <view class="my-title" slot="title"> <view class="name">{{item.prstStaffName}}</view> <view class="time">{{item.prstCheckInTime==null?'':item.prstCheckInTime}}</view> </view> <view class="my-label" slot="label"> <view>{{item.prstPostStaff==1?"项目经理":"项目组长"}}</view> </view> </van-cell> </van-cell-group> </view>单独控制开关
时间: 2023-08-04 10:08:23 浏览: 92
react-native-slot-machine:适用于本机的文本老虎机
可以使用`bindchange`事件来单独控制开关,具体实现方法如下:
1. 在`<van-cell>`标签中添加一个`data-index`属性,用来标识该开关在数据列表中的索引值。
2. 在`<van-switch>`标签中添加一个`bindchange`事件,用来监听开关状态的变化。
3. 在事件处理函数中,获取该开关对应的索引值,然后根据索引值来更新列表数据中对应项的`reported`属性,从而实现单独控制开关的效果。
示例代码如下:
```
<van-cell use-label-slot wx:for="{{tableData}}" wx:for-item="item" wx:for-index="index" data-index="{{index}}">
<van-switch size="50rpx" checked="{{item.reported}}" bind:change="onChange" />
<!-- 省略其他代码 -->
</van-cell>
```
```
onChange: function(e) {
// 获取开关所在的索引值
var index = e.currentTarget.dataset.index;
// 更新列表数据中对应项的 reported 属性
var newData = this.data.tableData;
newData[index].reported = !newData[index].reported;
this.setData({
tableData: newData
});
}
```
阅读全文