收藏
回答

微信小程序radio 这种类型的组件是怎么定义的,我定义就有问题?

正常情况下应该只有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>

回答关注问题邀请回答
收藏
登录 后发表内容