ホームページ > 記事 > WeChat アプレット > WeChat アプレット コンポーネントの詳細説明: ラジオ単一選択項目
ラジオ単一選択項目コンポーネントの説明:
ラジオ: 単一選択項目。
radio-group:
内部的に複数の
ラジオの単一選択アイテムのサンプル コードは次のように実行されます:
以下は WXML コードです:
<view class="page"> <view class="page__hd"> <text class="page__title">radio</text> <text class="page__desc">单选框</text> </view> <view class="page__bd"> <view class="section section_gap"> <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </radio-group> </view> </view> </view>
以下は JS コードです:
Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'FRA', value: '法国'}, ] }, radioChange: function(e) { console.log('radio发生change事件,携带value值为:', e.detail.value) } })
以下は WXSS コードです:
page { min-height: 100%; flex: 1; background-color: #FBF9FE; font-size: 32rpx; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; overflow: hidden; } .page__hd{ padding: 50rpx 50rpx 100rpx 50rpx; text-align: center; } .page__title{ display: inline-block; padding: 20rpx 40rpx; font-size: 32rpx; color: #AAAAAA; border-bottom: 1px solid #CCCCCC; } .page__desc{ display: none; margin-top: 20rpx; font-size: 26rpx; color: #BBBBBB; } .radio { display: block; margin-bottom: 20rpx; } .section{ margin-bottom: 80rpx; } .section_gap{ padding: 0 30rpx; }
Radio単一選択アイテムのメイン属性:
radio-group:
radio:
以上がWeChat アプレット コンポーネントの詳細説明: ラジオ単一選択項目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。