init

xhs-mini-demos/component-case/radio/radio.css

@@ -0,0 +1,4 @@
+
+.radio {
+  margin-right: 10px;
+}

xhs-mini-demos/component-case/radio/radio.js

@@ -0,0 +1,76 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'radio',
+      path: 'page/component/pages/radio/radio',
+    };
+  },
+
+  data: {
+    items: [
+      { value: 'USA', name: '美国' },
+      { value: 'CHN', name: '中国', checked: 'true' },
+      { value: 'BRA', name: '巴西' },
+    ],
+    items2: [
+      { value: 'XHS', name: '小红薯' },
+      { value: 'KLD', name: '克劳德', checked: 'true' },
+      { value: 'ND', name: '牛顿' },
+    ],
+    checked: false,
+    disabled: false,
+    color: 'red',
+    curValue: 'CHN',
+    curValue2: 'KLD',
+  },
+
+  radioChange(e) {
+    console.log('radio发生change事件，携带value值为：', e.detail.value);
+
+    const items = this.data.items;
+    for (let i = 0, len = items.length; i < len; ++i) {
+      items[i].checked = items[i].value === e.detail.value;
+    }
+
+    this.setData({
+      curValue: e.detail.value,
+    });
+
+    this.setData({
+      items,
+    });
+  },
+
+  radioChange2(e) {
+    const items2 = this.data.items2;
+    for (let i = 0, len = items2.length; i < len; ++i) {
+      items2[i].checked = items2[i].value === e.detail.value;
+    }
+
+    this.setData({
+      curValue2: e.detail.value,
+    });
+
+    this.setData({
+      items2,
+    });
+  },
+
+  changeChecked() {
+    this.setData({
+      checked: !this.data.checked,
+    });
+  },
+
+  changeDisabled() {
+    this.setData({
+      disabled: !this.data.disabled,
+    });
+  },
+
+  changeColor({ detail }) {
+    this.setData({
+      color: detail.value,
+    });
+  },
+});

xhs-mini-demos/component-case/radio/radio.json

@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "radio",
+    "usingComponents": {
+        "showbox": "../../common/component/showbox/index",
+        "box": "../../common/component/container/index"
+    }
+}

xhs-mini-demos/component-case/radio/radio.xhsml

@@ -0,0 +1,70 @@
+<view class="container">
+    <showbox title="基础展示">
+      <box>
+        <radio
+          checked="{{checked}}"
+          disabled="{{disabled}}"
+          color="{{color}}"
+        />
+      </box>
+    </showbox>
+
+    <showbox title="样式控制">
+      <box>
+        <view class="_end_split _py4">
+          <view class="weui-cell__bd">当前是否选中<text class="filed-tip">(checked)</text></view>
+          <view class="weui-cell__ft">
+            <switch checked="{{checked}}" bindchange="changeChecked" color="red"/>
+          </view>
+        </view>
+
+        <view class="_end_split _py4">
+          <view class="weui-cell__bd">是否禁用<text class="filed-tip">(disabled)</text></view>
+          <view class="weui-cell__ft">
+            <switch checked="{{disabled}}" bindchange="changeDisabled" color="red"/>
+          </view>
+        </view>
+
+        <view class="_py4">
+          <view class="weui-cell__bd">radio的颜色 <text class="filed-tip">(color)</text></view>
+          <view class="weui-cell__ft" style="flex:1">
+            <input class="weui-input" value="{{color}}" bindinput="changeColor" />
+          </view>
+        </view>
+      </box>
+    </showbox>
+
+    <showbox title="案例1">
+      <box>
+        <view>radioGroup1</view>
+          <view>
+            <view>当前选择value: {{curValue}}</view>
+            <radio-group bindchange="radioChange" class="_dflex _jc_space-between">
+              <label xhs:for="{{items}}" xhs:key="{{item.value}}">
+                <view>
+                  <radio value="{{item.value}}" checked="{{item.checked}}" color="red"/>
+                </view>
+                <view>{{item.name}}</view>
+              </label>
+            </radio-group>
+          </view>
+      </box>
+    </showbox>
+
+    <showbox title="案例2">
+      <box>
+        <view>radioGroup2</view>
+        <view>
+          <view>当前选择value: {{curValue2}}</view>
+          <radio-group bindchange="radioChange2" class="_dflex _jc_space-between">
+            <label xhs:for="{{items2}}" xhs:key="{{item.value}}">
+              <view class="weui-cell__hd">
+                <radio value="{{item.value}}" checked="{{item.checked}}" color="red"/>
+              </view>
+              <view>{{item.name}}</view>
+            </label>
+          </radio-group>
+        </view>
+      </box>
+    </showbox>
+</view>