正常情况下应该只有3个,但是现在有6个 上面三个有事件可以点击,下面3个没有事件只能展
xgb-radio.wxml
<text class="iconfont icondanxuanyixuanzhong" style="color: {{color}};font-size: {{size}};" wx:if="{{checked}}" ></text>
<text class="iconfont icondanxuanweixuanzhong" style="color: {{defaultColor}};font-size: {{size}};" wx:if="{{checked==false}}"></text>
xgb-radio.js
// component/xgb_radio/index.js
Component({
relations: {
'./xgb_radio_group': {
type: 'parent'
}
},
/**
* 组件的属性列表
*/
properties: {
value:{
type:String,
value:""
},
checked:{
type:Boolean,
value:false
},
disabled:{
type:Boolean,
value:false
},
color:{
type:String,
value:"#02BD8B"
},
size:{
type:String,
value:"36rpx"
},
defaultColor:{
type:String,
value:"#999999"
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
xgb-radio-group.wxml
<block wx:for="{{childList}}" wx:key="{{index}}">
<label bindtap="itemTap" data-index="{{index}}">
<xgb-radio checked="{{item.checked}}" value="{{item.value}}" disabled='{{item.disabled}}' color="{{item.color}}" size="{{item.size}}" defaultColor="{{item.defaultColor}}"></xgb-radio>
</label>
</block>
<slot></slot>
xgb-radio-group.js
Component({
relations: {
'./xgb_radio': {
type: 'child'
}
},
data: {
childList: [],
},
methods: {
itemTap: function(e) {
let list = this.data.childList;
list.map(item=>{return item.checked=false});
list[e.currentTarget.dataset.index].checked=true;
this.setData({
childList:list
});
this.triggerEvent("change", list);
},
_getChild: function() {
let nodes = this.getRelationNodes('./xgb_radio');
let list =[];
for (let item of nodes) {
list.push(item.data)
}
this.setData({
childList:list
})
}
},
ready: function() {
this._getChild()
}
})
page 这个是调用组件的地方
<view class="company" wx:if="{{company.length>0}}">
<xgb-radio-group bindchange="changeCompany">
<view wx:for="{{company}}" wx:key="index" class="company-item" >
<xgb-radio value="{{item}}" checked="{{item.checked}}" ></xgb-radio>
<text class="company-name {{item.checked?'company-action':''}}">{{item.name}}</text>
</view>
</xgb-radio-group>
</view>