docs(sticky): update code sample

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
 

src/sticky/_example/base/index.js

@@ -0,0 +1 @@
+Component({});

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"
+  }
+}

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>

src/sticky/_example/base/index.wxss

@@ -0,0 +1,3 @@
+.external-class {
+  width: 208rpx;
+}

src/sticky/_example/container/index.js

@@ -0,0 +1,13 @@
+Component({
+  data: {
+    container: null,
+  },
+
+  lifetimes: {
+    ready: function () {
+      this.setData({
+        container: () => this.createSelectorQuery().select('.wrapper'),
+      });
+    },
+  },
+});

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"
+  }
+}

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>

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;
+}

src/sticky/_example/offset/index.js

@@ -0,0 +1 @@
+Component({});

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"
+  }
+}

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>

src/sticky/_example/offset/index.wxss

@@ -0,0 +1,4 @@
+.external-class {
+  width: 208rpx;
+  margin-left: 272rpx;
+}

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"
   }
 }

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;
-  }
 }

src/sticky/_example/sticky.ts

@@ -1,11 +1 @@
-Page({
-  data: {
-    container: null,
-  },
-  onLoad() {
-    this.setData({
-      // @ts-ignore
-      container: () => wx.createSelectorQuery().select('.box-c'),
-    });
-  },
-});
+Page({});

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>