From e3f9f2c1c39083002ce8231ef8ffc11a8bbe55a6 Mon Sep 17 00:00:00 2001
From: XuPeng <elrichxu@gmail.com>
Date: Mon, 7 Dec 2020 11:25:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20swiper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.json                           |  3 +-
 pages/component/swiper/swiper.js   | 41 ++++++++++++++++++++++++
 pages/component/swiper/swiper.json |  3 ++
 pages/component/swiper/swiper.wxml | 50 ++++++++++++++++++++++++++++++
 pages/component/swiper/swiper.wxss | 28 +++++++++++++++++
 5 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 pages/component/swiper/swiper.js
 create mode 100644 pages/component/swiper/swiper.json
 create mode 100644 pages/component/swiper/swiper.wxml
 create mode 100644 pages/component/swiper/swiper.wxss

diff --git a/app.json b/app.json
index 356e587..b3b60be 100644
--- a/app.json
+++ b/app.json
@@ -3,7 +3,8 @@
     "pages/component/index/index",
     "pages/component/view/view",
     "pages/API/index/index",
-    "pages/component/scroll-view/scroll-view"
+    "pages/component/scroll-view/scroll-view",
+    "pages/component/swiper/swiper"
   ],
   "window": {
     "backgroundTextStyle": "light",
diff --git a/pages/component/swiper/swiper.js b/pages/component/swiper/swiper.js
new file mode 100644
index 0000000..f63d7af
--- /dev/null
+++ b/pages/component/swiper/swiper.js
@@ -0,0 +1,41 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'swiper',
+      path: 'pages/component/swiper/swiper'
+    }
+  },
+
+  data: {
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    indicatorDots: true,
+    vertical: false,
+    autoplay: false,
+    interval: 2000,
+    duration: 500
+  },
+
+  changeIndicatorDots() {
+    this.setData({
+      indicatorDots: !this.data.indicatorDots
+    })
+  },
+
+  changeAutoplay() {
+    this.setData({
+      autoplay: !this.data.autoplay
+    })
+  },
+
+  intervalChange(e) {
+    this.setData({
+      interval: e.detail.value
+    })
+  },
+
+  durationChange(e) {
+    this.setData({
+      duration: e.detail.value
+    })
+  }
+})
diff --git a/pages/component/swiper/swiper.json b/pages/component/swiper/swiper.json
new file mode 100644
index 0000000..be49061
--- /dev/null
+++ b/pages/component/swiper/swiper.json
@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "swiper"
+}
diff --git a/pages/component/swiper/swiper.wxml b/pages/component/swiper/swiper.wxml
new file mode 100644
index 0000000..ef3a60e
--- /dev/null
+++ b/pages/component/swiper/swiper.wxml
@@ -0,0 +1,50 @@
+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'swiper'}}"/>
+
+  <view class="page-body">
+    <view class="page-section page-section-spacing swiper">
+      <swiper indicator-dots="{{indicatorDots}}"
+        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
+        <block wx:for="{{background}}" wx:key="*this">
+          <swiper-item>
+            <view class="swiper-item {{item}}"></view>
+          </swiper-item>
+        </block>
+      </swiper>
+    </view>
+    <view class="page-section" style="margin-top: 20px;margin-bottom: 0;">
+      <view class="weui-cells weui-cells_after-title">
+        <view class="weui-cell weui-cell_switch">
+          <view class="weui-cell__bd">指示点</view>
+          <view class="weui-cell__ft">
+            <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
+          </view>
+        </view>
+        <view class="weui-cell weui-cell_switch">
+          <view class="weui-cell__bd">自动播放</view>
+          <view class="weui-cell__ft">
+            <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="page-section page-section-spacing">
+      <view class="page-section-title">
+        <text>幻灯片切换时长(ms)</text>
+        <text class="info">{{duration}}</text>
+      </view>
+      <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
+      <view class="page-section-title">
+        <text>自动播放间隔时长(ms)</text>
+        <text class="info">{{interval}}</text>
+      </view>
+      <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>
diff --git a/pages/component/swiper/swiper.wxss b/pages/component/swiper/swiper.wxss
new file mode 100644
index 0000000..c9f6053
--- /dev/null
+++ b/pages/component/swiper/swiper.wxss
@@ -0,0 +1,28 @@
+@import "../../common/lib/weui.wxss";
+
+button{
+  margin-bottom: 15px;
+}
+button:last-child{
+  margin-bottom: 0;
+}
+.page-section-title{
+  padding: 0;
+}
+.swiper-item{
+  display: block;
+  height: 150px;
+}
+.page-section-title{
+  margin-top: 30px;
+  position: relative;
+}
+.info{
+  position: absolute;
+  right: 0;
+  color: #353535;
+  font-size: 15px;
+}
+.page-foot{
+  margin-top: 25px;
+}
\ No newline at end of file