feat: 添加 radio slider 页面

app.json

@@ -14,7 +14,9 @@
     "pages/component/navigator/redirect",
     "pages/component/button/button",
     "pages/component/checkbox/checkbox",
-    "pages/component/label/label"
+    "pages/component/label/label",
+    "pages/component/radio/radio",
+    "pages/component/slider/slider"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/component/radio/radio.js

@@ -0,0 +1,32 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'radio',
+      path: 'pages/component/radio/radio'
+    }
+  },
+
+  data: {
+    items: [
+      {value: 'USA', name: '美国'},
+      {value: 'CHN', name: '中国', checked: 'true'},
+      {value: 'BRA', name: '巴西'},
+      {value: 'JPN', name: '日本'},
+      {value: 'ENG', name: '英国'},
+      {value: 'FRA', name: '法国'},
+    ]
+  },
+
+  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({
+      items
+    })
+  }
+})

pages/component/radio/radio.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "radio"
+}

pages/component/radio/radio.wxml

@@ -0,0 +1,49 @@
+<import src="../../common/head.wxml" />
+<import src="../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'radio'}}"/>
+
+  <view class="page-body">
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">默认样式</view>
+      <label class="radio">
+        <radio value="r1" checked="true"/>选中
+      </label>
+      <label class="radio">
+        <radio value="r2" />未选中
+      </label>
+    </view>
+
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">禁用</view>
+      <label class="radio">
+        <radio disabled />
+      </label>
+    </view>
+
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">设置颜色</view>
+      <label class="radio">
+        <radio color="#409eff" />颜色
+      </label>
+    </view>
+
+    <view class="page-section">
+      <view class="page-section-title">推荐展示样式</view>
+      <view class="weui-cells weui-cells_after-title">
+        <radio-group bindchange="radioChange">
+          <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
+
+            <view class="weui-cell__hd">
+              <radio value="{{item.value}}" checked="true"/>
+            </view>
+            <view class="weui-cell__bd">{{item.name}}</view>
+          </label>
+        </radio-group>
+      </view>
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>

pages/component/radio/radio.wxss

@@ -0,0 +1,5 @@
+@import "../../common/lib/weui.wxss";
+
+.radio {
+  margin-right: 10px;
+}

pages/component/slider/slider.js

@@ -0,0 +1,18 @@
+const pageData = {
+  onShareAppMessage() {
+    return {
+      title: 'slider',
+      path: 'pages/component/slider/slider'
+    }
+  },
+}
+
+for (let i = 1; i < 5; ++i) {
+  (function (index) {
+    pageData['slider' + index + 'change'] = function (e) {
+      console.log('slider' + index + '发生change事件，携带值为', e.detail.value)
+    }
+  }(i))
+}
+
+Page(pageData)

pages/component/slider/slider.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "slider"
+}

pages/component/slider/slider.wxml

@@ -0,0 +1,66 @@
+<import src="../../common/head.wxml" />
+<import src="../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'slider'}}"/>
+
+  <view class="page-body">
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">设置step</view>
+      <view class="body-view">
+        <slider value="60" bindchange="slider2change" step="5"/>
+      </view>
+    </view>
+
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">显示当前value</view>
+      <view class="body-view">
+        <slider value="50" bindchange="slider3change" show-value/>
+      </view>
+    </view>
+
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">设置最小/最大值</view>
+      <view class="body-view">
+        <slider value="100" bindchange="slider4change" min="50" max="200" show-value/>
+      </view>
+    </view>
+
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">禁用</view>
+      <view class="body-view">
+        <slider value="60" disabled />
+      </view>
+    </view>
+
+    <!-- <view class="page-section page-section-gap">
+      <view class="page-section-title">已选择的颜色</view>
+      <view class="body-view">
+        <slider value="60"  activeColor="#409eff" />
+      </view>
+    </view>
+
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">背景条的颜色</view>
+      <view class="body-view">
+        <slider value="60"  backgroundColor="#409eff" />
+      </view>
+    </view>
+
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">滑块的大小，取值范围为 12 - 28</view>
+      <view class="body-view">
+        <slider value="60"  block-size="12" />
+      </view>
+    </view>
+
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">滑块的颜色</view>
+      <view class="body-view">
+        <slider value="60"  block-color="#409eff" />
+      </view>
+    </view> -->
+  </view>
+
+  <template is="foot" />
+</view>

pages/component/slider/slider.wxss

@@ -0,0 +1,3 @@
+slider {
+  margin: 0;
+}