From 7bf3ce9c3533cee411680419b3288e087ab3b3d8 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Thu, 4 Aug 2022 08:58:12 +0800
Subject: [PATCH] docs(sticky): update code sample

---
 src/sticky/README.md                     | 21 +++++++++++------
 src/sticky/_example/base/index.js        |  1 +
 src/sticky/_example/base/index.json      |  7 ++++++
 src/sticky/_example/base/index.wxml      |  3 +++
 src/sticky/_example/base/index.wxss      |  3 +++
 src/sticky/_example/container/index.js   | 13 ++++++++++
 src/sticky/_example/container/index.json |  7 ++++++
 src/sticky/_example/container/index.wxml |  5 ++++
 src/sticky/_example/container/index.wxss | 15 ++++++++++++
 src/sticky/_example/offset/index.js      |  1 +
 src/sticky/_example/offset/index.json    |  7 ++++++
 src/sticky/_example/offset/index.wxml    |  3 +++
 src/sticky/_example/offset/index.wxss    |  4 ++++
 src/sticky/_example/sticky.json          |  5 +++-
 src/sticky/_example/sticky.less          | 30 ------------------------
 src/sticky/_example/sticky.ts            | 12 +---------
 src/sticky/_example/sticky.wxml          | 16 ++++---------
 17 files changed, 92 insertions(+), 61 deletions(-)
 create mode 100644 src/sticky/_example/base/index.js
 create mode 100644 src/sticky/_example/base/index.json
 create mode 100644 src/sticky/_example/base/index.wxml
 create mode 100644 src/sticky/_example/base/index.wxss
 create mode 100644 src/sticky/_example/container/index.js
 create mode 100644 src/sticky/_example/container/index.json
 create mode 100644 src/sticky/_example/container/index.wxml
 create mode 100644 src/sticky/_example/container/index.wxss
 create mode 100644 src/sticky/_example/offset/index.js
 create mode 100644 src/sticky/_example/offset/index.json
 create mode 100644 src/sticky/_example/offset/index.wxml
 create mode 100644 src/sticky/_example/offset/index.wxss

diff --git a/src/sticky/README.md b/src/sticky/README.md
index e123c6595..055e29e31 100644
--- a/src/sticky/README.md
+++ b/src/sticky/README.md
@@ -17,17 +17,24 @@ isComponent: true
 
 ## 代码演示
 
-### 基础吸顶容器
-
 将内容包裹在 `Sticky` 组件内
 
 <img src="https://tdesign.gtimg.com/miniprogram/readme/sticky.gif" width="375px" height="50%">
 
-```html
-<t-sticky offset-top="{{40}}">
-  <t-button class="box2" theme="danger" t-class="inner-box" size="small">吸顶距离</t-button>
-</t-sticky>
-```
+### 基础吸顶
+
+{{ base }}
+
+
+### 吸顶距离
+
+{{ offset }}
+
+### 指定容器
+
+{{ container }}
+
+
 
 ## API
 
diff --git a/src/sticky/_example/base/index.js b/src/sticky/_example/base/index.js
new file mode 100644
index 000000000..b79c5124b
--- /dev/null
+++ b/src/sticky/_example/base/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/sticky/_example/base/index.json b/src/sticky/_example/base/index.json
new file mode 100644
index 000000000..ad7615eea
--- /dev/null
+++ b/src/sticky/_example/base/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-sticky": "tdesign-miniprogram/sticky/sticky"
+  }
+}
diff --git a/src/sticky/_example/base/index.wxml b/src/sticky/_example/base/index.wxml
new file mode 100644
index 000000000..992b51c2c
--- /dev/null
+++ b/src/sticky/_example/base/index.wxml
@@ -0,0 +1,3 @@
+<t-sticky>
+  <t-button size="large" theme="primary" t-class="external-class">基础吸顶</t-button>
+</t-sticky>
diff --git a/src/sticky/_example/base/index.wxss b/src/sticky/_example/base/index.wxss
new file mode 100644
index 000000000..104c2daee
--- /dev/null
+++ b/src/sticky/_example/base/index.wxss
@@ -0,0 +1,3 @@
+.external-class {
+  width: 208rpx;
+}
diff --git a/src/sticky/_example/container/index.js b/src/sticky/_example/container/index.js
new file mode 100644
index 000000000..151edb9e9
--- /dev/null
+++ b/src/sticky/_example/container/index.js
@@ -0,0 +1,13 @@
+Component({
+  data: {
+    container: null,
+  },
+
+  lifetimes: {
+    ready: function () {
+      this.setData({
+        container: () => this.createSelectorQuery().select('.wrapper'),
+      });
+    },
+  },
+});
diff --git a/src/sticky/_example/container/index.json b/src/sticky/_example/container/index.json
new file mode 100644
index 000000000..ad7615eea
--- /dev/null
+++ b/src/sticky/_example/container/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-sticky": "tdesign-miniprogram/sticky/sticky"
+  }
+}
diff --git a/src/sticky/_example/container/index.wxml b/src/sticky/_example/container/index.wxml
new file mode 100644
index 000000000..37285acb3
--- /dev/null
+++ b/src/sticky/_example/container/index.wxml
@@ -0,0 +1,5 @@
+<view class="wrapper">
+  <t-sticky container="{{ container }}">
+    <t-button size="large" t-class="external-class green-button">指定容器</t-button>
+  </t-sticky>
+</view>
diff --git a/src/sticky/_example/container/index.wxss b/src/sticky/_example/container/index.wxss
new file mode 100644
index 000000000..93f894900
--- /dev/null
+++ b/src/sticky/_example/container/index.wxss
@@ -0,0 +1,15 @@
+.wrapper {
+  width: 100%;
+  height: 150px;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.external-class {
+  width: 208rpx;
+  margin-left: 512rpx;
+}
+
+.green-button {
+  background-color: rgba(0, 168, 112, 1) !important;
+  color: #fff !important;
+}
diff --git a/src/sticky/_example/offset/index.js b/src/sticky/_example/offset/index.js
new file mode 100644
index 000000000..b79c5124b
--- /dev/null
+++ b/src/sticky/_example/offset/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/sticky/_example/offset/index.json b/src/sticky/_example/offset/index.json
new file mode 100644
index 000000000..ad7615eea
--- /dev/null
+++ b/src/sticky/_example/offset/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-sticky": "tdesign-miniprogram/sticky/sticky"
+  }
+}
diff --git a/src/sticky/_example/offset/index.wxml b/src/sticky/_example/offset/index.wxml
new file mode 100644
index 000000000..3b42ca970
--- /dev/null
+++ b/src/sticky/_example/offset/index.wxml
@@ -0,0 +1,3 @@
+<t-sticky offset-top="{{ 40 }}">
+  <t-button size="large" theme="danger" t-class="external-class">吸顶距离</t-button>
+</t-sticky>
diff --git a/src/sticky/_example/offset/index.wxss b/src/sticky/_example/offset/index.wxss
new file mode 100644
index 000000000..3543d8d13
--- /dev/null
+++ b/src/sticky/_example/offset/index.wxss
@@ -0,0 +1,4 @@
+.external-class {
+  width: 208rpx;
+  margin-left: 272rpx;
+}
diff --git a/src/sticky/_example/sticky.json b/src/sticky/_example/sticky.json
index 9faaa4e79..7ad93e48b 100644
--- a/src/sticky/_example/sticky.json
+++ b/src/sticky/_example/sticky.json
@@ -1,6 +1,9 @@
 {
   "navigationBarTitleText": "Sticky",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "t-demo": "../../components/demo-block/index",
+    "base": "./base",
+    "offset": "./offset",
+    "container": "./container"
   }
 }
diff --git a/src/sticky/_example/sticky.less b/src/sticky/_example/sticky.less
index f9c59b499..8e47f8dc1 100644
--- a/src/sticky/_example/sticky.less
+++ b/src/sticky/_example/sticky.less
@@ -1,33 +1,3 @@
 .tdesign-demo-sticky-base {
   height: 3000rpx;
-
-  .inner-box {
-    width: 208rpx;
-    height: 88rpx;
-  }
-
-  .box1 {
-    margin-left: 32rpx;
-  }
-
-  .box2 {
-    margin-left: 272rpx;
-    background-color: rgba(48, 106, 255, 0.6);
-  }
-
-  .box3 {
-    margin-left: 512rpx;
-    background-color: rgba(48, 106, 255, 0.3);
-  }
-
-  .box-c {
-    width: 100%;
-    height: 150px;
-    background-color: rgba(255, 255, 255, 1);
-  }
-
-  .green-button {
-    background-color: rgba(0, 168, 112, 1);
-    color: #fff;
-  }
 }
diff --git a/src/sticky/_example/sticky.ts b/src/sticky/_example/sticky.ts
index fed953036..560d44d43 100644
--- a/src/sticky/_example/sticky.ts
+++ b/src/sticky/_example/sticky.ts
@@ -1,11 +1 @@
-Page({
-  data: {
-    container: null,
-  },
-  onLoad() {
-    this.setData({
-      // @ts-ignore
-      container: () => wx.createSelectorQuery().select('.box-c'),
-    });
-  },
-});
+Page({});
diff --git a/src/sticky/_example/sticky.wxml b/src/sticky/_example/sticky.wxml
index aefb1f956..744c7895c 100644
--- a/src/sticky/_example/sticky.wxml
+++ b/src/sticky/_example/sticky.wxml
@@ -1,21 +1,13 @@
 <view class="demo tdesign-demo-sticky-base">
   <view class="demo-title">Sticky 吸顶</view>
   <view class="demo-desc">用于常驻页面顶部的信息、操作展示。</view>
-  <t-demo title="01 类型" desc="基础吸顶">
-    <t-sticky>
-      <t-button class="box1" theme="primary" t-class="inner-box" size="small">基础吸顶</t-button>
-    </t-sticky>
+  <t-demo title="01 类型" desc="基础吸顶" padding>
+    <base />
   </t-demo>
   <t-demo title="" desc="吸顶距离">
-    <t-sticky offset-top="{{ 40 }}">
-      <t-button class="box2" theme="danger" t-class="inner-box" size="small">吸顶距离</t-button>
-    </t-sticky>
+    <offset />
   </t-demo>
   <t-demo title="" desc="指定容器">
-    <view class="box-c">
-      <t-sticky container="{{ container }}">
-        <t-button size="small" class="box3" t-class="inner-box green-button">指定容器</t-button>
-      </t-sticky>
-    </view>
+    <container />
   </t-demo>
 </view>