先来看问题，改变组件状态会使其 class 丢失
part-1 直接修改 data
<!-- 颜色分类 -->
<view class="color-size">
<view class="tit">颜色分类</view>
<view class="tags">
<text class="tag " wx:for="" wx:key="" data-index="" bindtap="skuTagsHandle"></text>
</view>
</view>
Component({
/**
* 组件的初始数据
*/
data: {
tags: [
{onSelect:false,value:'90cm'},
{onSelect:false,value:'100cm'},
{onSelect:false,value:'110cm'},
{onSelect:false,value:'120cm'},
{onSelect:false,value:'130cm'},
{onSelect:false,value:'140cm'},
{onSelect:false,value:'150cm'}
]
},
/**
* 组件的方法列表
*/
methods: {
skuTagsHandle (e) { // 选择 sku 控制
let _idx = e.currentTarget.dataset.index
let _tags = this.data.tags
// console.log(_idx)
this.data.tags.filter((item, index) => {
if (index === _idx) {
let _key = `tags[${_idx}].onSelect`
let _val = !this.data.tags[_idx].onSelect
this.setData({
[_key]:_val
})
} else if (index !== _idx) {
item.onSelect = false
let _key = `tags[${index}].onSelect`
let _val = false
this.setData({
[_key]:_val
})
}
})
}
}
})
然而理想很丰满，现实很骨感，按照往常的逻辑写components好像行不通🙈，继续尝试~
part-2 定义变量代替赋值
<!-- 颜色分类 -->
<view class="color-size">
<view class="tit">颜色分类</view>
<view class="tags">
<text class="tag " wx:for="" wx:key="" data-index="" bindtap="skuTagsHandle"></text>
</view>
</view>
Component({
/**
* 组件的初始数据
*/
data: {
tags: [
{onSelect:false,value:'90cm'},
{onSelect:false,value:'100cm'},
{onSelect:false,value:'110cm'},
{onSelect:false,value:'120cm'},
{onSelect:false,value:'130cm'},
{onSelect:false,value:'140cm'},
{onSelect:false,value:'150cm'}
]
},
/**
* 组件的方法列表
*/
methods: {
skuTagsHandle (e) { // 选择 sku 控制
let _idx = e.currentTarget.dataset.index
let _tags = this.data.tags
_tags.filter((item, index) => {
if (index === _idx) {
item.onSelect = !item.onSelect
} else {
item.onSelect = false
}
})
this.setData({
tags: _tags
})
}
}
})
然而还是不生效，并不是修改data的姿势不正确🙈，继续尝试~
part-3 通过循环下标索引切换class
<view class="tags">
<text class="tag " wx:for="" wx:key="" data-index="" bindtap="skuTagsHandle"></text>
</view>
Component({
/**
* 组件的初始数据
*/
data: {
currTag: null,
tags: [
'90cm',
'100cm',
'110cm',
'120cm',
'130cm',
'140cm',
'150cm'
]
},
/**
* 组件的方法列表
*/
methods: {
skuTagsHandle (e) { // 选择 sku 控制
let _idx = e.currentTarget.dataset.index
console.log(_idx)
this.setData({
currTag: _idx
})
}
}
})
依然不生效，几近绝望，不改data也不行的话，那就不是数据的问题了🙈，继续尝试
part-4 怀疑是for循环的问题，导致动态数据不能动态绑定class
<view class="tags">
<view class="tag " data-index="0" bindtap="test">aa</view>
<view class="tag " data-index="1" bindtap="test">bb</view>
<view class="tag " data-index="2" bindtap="test">cc</view>
<view class="tag " data-index="3" bindtap="test">dd</view>
</view>
Component({
/**
* 组件的初始数据
*/
data: {
testkey: '0',
},
/**
* 组件的方法列表
*/
methods: {
test (e) {
let _idx = e.currentTarget.dataset.index
this.setData({
testkey: _idx
})
}
}
})
这可能是我可以想出来的所有突破口了，只好继续用最笨的方法逐个试错😹，继续尝试~
part-5 把子组件代码照搬到父页面看能否实现
既不是js赋值出了问题，也是不for循环出了问题，难道是自定义组件的问题？把代码拷贝片段拷贝到父页面，果然问题没有重现，确定了是component的问题，但是还是要在自定义组件中使用的，继续找原因
part-6 把<text>换成<view>，问题解决，前4种方法也是可以的，标签换成<view>就可以了，或者修改display为block即可。
<view class="tags">
<view class="tag " wx:for="" wx:key="" data-index="" bindtap="skuTagsHandle"></view>
</view>
Component({
/**
* 组件的初始数据
*/
data: {
currTag: null,
tags: [
{onSelect:0,val:'90cm'},
{onSelect:0,val:'100cm'},
{onSelect:0,val:'110cm'},
{onSelect:0,val:'120cm'},
{onSelect:0,val:'130cm'},
{onSelect:0,val:'140cm'},
{onSelect:0,val:'150cm'}
]
},
/**
* 组件的方法列表
*/
methods: {
skuTagsHandle (e) { // 选择 sku 控制
let _idx = e.currentTarget.dataset.index
let _tags = this.data.tags
_tags.filter((item, index) => {
index === _idx ?
item.onSelect = !item.onSelect :
item.onSelect = 0
})
this.setData({
tags: _tags
})
}
}
})