From 92402d73b27d15002d409c00b82dc63f66e729de Mon Sep 17 00:00:00 2001
From: XuPeng <elrichxu@gmail.com>
Date: Tue, 8 Dec 2020 13:45:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20radio=20slider=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.json                           |  4 +-
 pages/component/radio/radio.js     | 32 +++++++++++++++
 pages/component/radio/radio.json   |  3 ++
 pages/component/radio/radio.wxml   | 49 ++++++++++++++++++++++
 pages/component/radio/radio.wxss   |  5 +++
 pages/component/slider/slider.js   | 18 ++++++++
 pages/component/slider/slider.json |  3 ++
 pages/component/slider/slider.wxml | 66 ++++++++++++++++++++++++++++++
 pages/component/slider/slider.wxss |  3 ++
 9 files changed, 182 insertions(+), 1 deletion(-)
 create mode 100644 pages/component/radio/radio.js
 create mode 100644 pages/component/radio/radio.json
 create mode 100644 pages/component/radio/radio.wxml
 create mode 100644 pages/component/radio/radio.wxss
 create mode 100644 pages/component/slider/slider.js
 create mode 100644 pages/component/slider/slider.json
 create mode 100644 pages/component/slider/slider.wxml
 create mode 100644 pages/component/slider/slider.wxss

diff --git a/app.json b/app.json
index 1a3ba59..be84926 100644
--- a/app.json
+++ b/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",
diff --git a/pages/component/radio/radio.js b/pages/component/radio/radio.js
new file mode 100644
index 0000000..29fb2dd
--- /dev/null
+++ b/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
+    })
+  }
+})
diff --git a/pages/component/radio/radio.json b/pages/component/radio/radio.json
new file mode 100644
index 0000000..212cff9
--- /dev/null
+++ b/pages/component/radio/radio.json
@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "radio"
+}
diff --git a/pages/component/radio/radio.wxml b/pages/component/radio/radio.wxml
new file mode 100644
index 0000000..e4b790e
--- /dev/null
+++ b/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>
diff --git a/pages/component/radio/radio.wxss b/pages/component/radio/radio.wxss
new file mode 100644
index 0000000..806a369
--- /dev/null
+++ b/pages/component/radio/radio.wxss
@@ -0,0 +1,5 @@
+@import "../../common/lib/weui.wxss";
+
+.radio {
+  margin-right: 10px;
+}
diff --git a/pages/component/slider/slider.js b/pages/component/slider/slider.js
new file mode 100644
index 0000000..2c39183
--- /dev/null
+++ b/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)
diff --git a/pages/component/slider/slider.json b/pages/component/slider/slider.json
new file mode 100644
index 0000000..ea92108
--- /dev/null
+++ b/pages/component/slider/slider.json
@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "slider"
+}
diff --git a/pages/component/slider/slider.wxml b/pages/component/slider/slider.wxml
new file mode 100644
index 0000000..bb48456
--- /dev/null
+++ b/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>
diff --git a/pages/component/slider/slider.wxss b/pages/component/slider/slider.wxss
new file mode 100644
index 0000000..c5529a1
--- /dev/null
+++ b/pages/component/slider/slider.wxss
@@ -0,0 +1,3 @@
+slider {
+  margin: 0;
+}
\ No newline at end of file