From 34a4df9850fe31cbfcdb49dba3b2f3000f02368f Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Wed, 21 Jun 2023 16:14:03 +0800
Subject: [PATCH] feat: add slider switch

---
 App.vue                               | 35 ++++++++++--------
 pages.json                            | 13 ++++++-
 pages/component/slider/slider.uvue    | 43 ++++++++++++++++++++++
 pages/component/switch/switch.uvue    | 51 +++++++++++++++++++++++++++
 pages/tabBar/component/component.uvue |  4 +--
 5 files changed, 128 insertions(+), 18 deletions(-)
 create mode 100644 pages/component/slider/slider.uvue
 create mode 100644 pages/component/switch/switch.uvue

diff --git a/App.vue b/App.vue
index c58a0855..fc8f1f3b 100644
--- a/App.vue
+++ b/App.vue
@@ -1,19 +1,24 @@
 <script>
-	export default {
-		onLaunch: function() {
-			console.log('App Launch')
-		},
-		onShow: function() {
-			console.log('App Show')
-		},
-		onHide: function() {
-			console.log('App Hide')
-		}
-	}
+  export default {
+    onLaunch: function() {
+      console.log('App Launch')
+
+      // const performance: Performance = uni.getPerformance()
+      // const observer1: PerformanceObserver = performance.createObserver((entryList: PerformanceObserverEntryList) => {
+      //   console.log("observer1:entryList.getEntries()" + JSON.stringify(entryList.getEntries()))
+      // })
+      // observer1.observe({ entryTypes: ['render', 'navigation'] } as PerformanceObserverOptions)
+    },
+    onShow: function() {
+      console.log('App Show')
+    },
+    onHide: function() {
+      console.log('App Hide')
+    }
+  }
 </script>
 
 <style>
-	/*每个页面公共css */
-    @import './common/uni.css';
-
-</style>
+  /*每个页面公共css */
+  @import './common/uni.css';
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 8674b8a4..c9e13511 100644
--- a/pages.json
+++ b/pages.json
@@ -36,7 +36,6 @@
                 "navigationBarTitleText": "button"
             }
         },
-
         {
             "path": "pages/component/radio/radio",
             "style": {
@@ -61,6 +60,18 @@
                 "navigationBarTitleText": "textarea"
             }
         },
+        {
+            "path": "pages/component/slider/slider",
+            "style": {
+                "navigationBarTitleText": "slider"
+            }
+        },
+        {
+            "path": "pages/component/switch/switch",
+            "style": {
+                "navigationBarTitleText": "switch"
+            }
+        },
         {
             "path": "pages/component/image/image",
             "style": {
diff --git a/pages/component/slider/slider.uvue b/pages/component/slider/slider.uvue
new file mode 100644
index 00000000..a988a9e5
--- /dev/null
+++ b/pages/component/slider/slider.uvue
@@ -0,0 +1,43 @@
+<template>
+  <view class="uni-padding-wrap">
+    <page-head :title="title"></page-head>
+    <view class="uni-title">显示当前value</view>
+    <view>
+      <slider @change="sliderChange" :value="50" :show-value="true" />
+    </view>
+
+    <view class="uni-title">设置步进step跳动</view>
+    <view>
+      <slider @change="sliderChange" :value="60" :step="5" />
+    </view>
+
+    <view class="uni-title">设置最小/最大值</view>
+    <view>
+      <slider @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
+    </view>
+
+    <view class="uni-title">不同颜色和大小的滑块</view>
+    <view>
+      <slider @change="sliderChange" :value="50" backgroundColor="#000000" activeColor="#FFCC33" block-color="#8A6DE9"
+        :block-size="20" />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+  export default {
+    data() {
+      return {
+        title: 'slider 滑块'
+      }
+    },
+    methods: {
+      sliderChange(e : SliderChangeEvent) {
+        console.log('value 发生变化：' + e.detail.value)
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/pages/component/switch/switch.uvue b/pages/component/switch/switch.uvue
new file mode 100644
index 00000000..33d29b46
--- /dev/null
+++ b/pages/component/switch/switch.uvue
@@ -0,0 +1,51 @@
+<template>
+  <view class="uni-padding-wrap">
+    <view class="uni-common-mt">
+      <view class="uni-title">默认样式</view>
+      <view class="flex-row">
+        <switch :checked="true" @change="switch1Change" />
+        <switch @change="switch2Change" />
+      </view>
+      <view class="uni-title">不同颜色和尺寸的switch</view>
+      <view class="flex-row">
+        <switch color="#FFCC33" style="transform:scale(0.7)" :checked="true" />
+        <switch color="#FFCC33" style="transform:scale(0.7)" />
+      </view>
+      <view class="uni-title">推荐展示样式</view>
+    </view>
+    <view class="uni-list">
+      <view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell-db">开启中</view>
+        <switch :checked="true" />
+      </view>
+      <view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell-db">关闭</view>
+        <switch />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+  export default {
+    data() {
+      return {
+        title: 'switch 开关'
+      }
+    },
+    methods: {
+      switch1Change: function (e : SwitchChangeEvent) {
+        console.log('switch1 发生 change 事件，携带值为', e.detail.value)
+      },
+      switch2Change: function (e : SwitchChangeEvent) {
+        console.log('switch2 发生 change 事件，携带值为', e.detail.value)
+      }
+    }
+  }
+</script>
+
+<style>
+  .flex-row {
+    flex-direction: row;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/tabBar/component/component.uvue b/pages/tabBar/component/component.uvue
index a3609969..b6589d59 100644
--- a/pages/tabBar/component/component.uvue
+++ b/pages/tabBar/component/component.uvue
@@ -122,10 +122,10 @@
                             enable: true
                         }, {
                             name: 'slider',
-                            enable: false
+                            enable: true
                         }, {
                             name: 'switch',
-                            enable: false
+                            enable: true
                         }, {
                             name: 'textarea',
                             enable: true
-- 
GitLab