要求:
默认不选中,当选中出口时,显示港口类型,其他情况不显示港口类型
初始效果:
1.xml部分代码如下
<view class="weui-flex">
<view class="weui-flex__item">
<view class="placeholder">
<view class="wehx-custom_title">进出口类型</view>
<view class="wehx-custom_content">
<radio-group class="radio-group" bindchange="radioChange" style="display:flex;">
<radio class="weui-flex__item radio" wx:for-items="{{radios}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}" color="#2ea7e0">
<text>{{item.value}}</text>
</radio>
</radio-group>
</view>
</view>
</view>
</view>
<view class="weui-flex" wx:if="{{aa==true}}">
<view class="weui-flex__item">
<view class="placeholder">
<view class="wehx-custom_title">港口选择</view>
<view class="wehx-custom_content">
<radio-group class="radio-group" bindchange="portChange" style="display:flex;">
<radio class="weui-flex__item radio" wx:for-items="{{ports}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}" color="#2ea7e0">
<text>{{item.value}}</text>
</radio>
</radio-group>
</view>
</view>
</view>
</view>
- js部分代码如下:
data: {
radios: [
{ name: '进口', value: '进口' },
{ name: '出口', value: '出口', checked: '' },
],
ports: [
{ name: '外港', value: '外港' },
{ name: '洋山', value: '洋山',},
],
aa:false//默认不显示 港口
},
// radio事件
radioChange: function (e) {
console.log('radio发生change事件,携带value值为:', e.detail.value)
if(e.detail.value== '出口'){
this.setData({
aa:true
})
}else{
this.setData({
aa:false
})
}
},
portChange:function(e){
console.log('radio发生change事件,携带value值为:', e.detail.value)
},
最终效果如图: