Heim  >  Artikel  >  WeChat-Applet  >  Detaillierte Erläuterung der WeChat-Applet-Komponente: Radio-Einzelauswahlelement

Detaillierte Erläuterung der WeChat-Applet-Komponente: Radio-Einzelauswahlelement

高洛峰
高洛峰Original
2017-03-27 11:20:203089Durchsuche

Radio-Einzelauswahl-Elementkomponentenbeschreibung:

Radio: Einzelauswahl-Element.

radio-group:

Einzelelementselektor, intern bestehend aus mehreren .

Der Beispielcode für das Radio-Einzelauswahlelement lautet wie folgt:

Detaillierte Erläuterung der WeChat-Applet-Komponente: Radio-Einzelauswahlelement

Das Folgende ist der WXML-Code:

<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>

Der Das Folgende ist der JS-Code:

Page({
  data: {
    items: [
      {name: &#39;USA&#39;, value: &#39;美国&#39;},
      {name: &#39;CHN&#39;, value: &#39;中国&#39;, checked: &#39;true&#39;},
      {name: &#39;BRA&#39;, value: &#39;巴西&#39;},
      {name: &#39;JPN&#39;, value: &#39;日本&#39;},
      {name: &#39;ENG&#39;, value: &#39;英国&#39;},
      {name: &#39;FRA&#39;, value: &#39;法国&#39;},
    ]
  },
  radioChange: function(e) {
    console.log(&#39;radio发生change事件,携带value值为:&#39;, e.detail.value)
  }
})

Das Folgende ist der WXSS-Code:

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;
}

Die Hauptattribute des Radio-Einzelelements:

Radio-Gruppe:

Detaillierte Erläuterung der WeChat-Applet-Komponente: Radio-Einzelauswahlelement

Radio:

Detaillierte Erläuterung der WeChat-Applet-Komponente: Radio-Einzelauswahlelement

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der WeChat-Applet-Komponente: Radio-Einzelauswahlelement. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn