init

xhs-mini-demos/api-case/lifetime/lifetime.css

@@ -0,0 +1,16 @@
+.lifetime-message {
+  max-height: 400px;
+}
+
+.lifetime-message .lifetime-message-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.lifetime-message .lifetime-message-item text {
+  padding: 0 10px;
+  border-radius: 100px;
+  background-color: red;
+  color: white;
+}

xhs-mini-demos/api-case/lifetime/lifetime.js

@@ -0,0 +1,89 @@
+let messageCount = 0;
+
+Page({
+  data: {
+    message: [],
+    height: '0',
+    scrollTop: 0
+  },
+
+  onLoad() {
+    this.pushMessage('onLoad');
+  },
+  onShow() {
+    this.pushMessage('onShow');
+  },
+  onReady() {
+    this.pushMessage('onReady');
+  },
+  onHide() {
+    this.pushMessage('onHide');
+  },
+  onUnload() {
+    this.pushMessage('onUnload');
+  },
+  onPullDownRefresh() {
+    this.pushMessage('onPullDownRefresh');
+  },
+  onReachBottom() {
+    this.pushMessage('onReachBottom');
+  },
+  onShareAppMessage() {
+    this.pushMessage('onShareAppMessage');
+  },
+  onShareTimeline() {
+    this.pushMessage('onShareTimeline');
+  },
+  onShareChat() {
+    this.pushMessage('onShareChat');
+  },
+  onPageScroll() {
+    this.pushMessage('onPageScroll');
+  },
+  onTabItemTap() {
+    this.pushMessage('onTabItemTap');
+  },
+
+  pushMessage(name) {
+    const msg = this.data.message;
+    if (!msg.length) {
+      this.setData('message', [{lifeName: name, count: 1}]);
+      return;
+    }
+
+    const last = msg[msg.length - 1];
+
+    if (last.lifeName === name) {
+      last.count++;
+      this.setData('message', [...msg]);
+      return;
+    }
+    messageCount++;
+    this.scrollToBottom();
+    this.setData({
+      message: [...msg, {lifeName: name, count: 1}]
+    });
+  },
+
+  startPullDownRefresh() {
+    xhs.startPullDownRefresh();
+  },
+
+  stopPullDownRefresh() {
+    xhs.stopPullDownRefresh();
+  },
+
+  generateBox() {
+    this.setData('height', '50vh');
+  },
+
+  notGenerateBox() {
+    this.setData('height', '0');
+  },
+
+  scrollToBottom() {
+    this.setData({
+      scrollTop: 100 * messageCount
+    });
+  }
+});

xhs-mini-demos/api-case/lifetime/lifetime.json

@@ -0,0 +1,8 @@
+{
+    "navigationBarTitleText": "生命周期",
+    "enablePullDownRefresh": true,
+    "usingComponents": {
+        "showbox": "../../common/component/showbox/index",
+        "box": "../../common/component/container/index"
+    }
+}

xhs-mini-demos/api-case/lifetime/lifetime.xhsml

@@ -0,0 +1,36 @@
+<view class="container">
+  <showbox title="小程序页面生命周期消息">
+    <box>
+      <scroll-view  scroll-y scroll-top="{{scrollTop}}">
+        <view class="lifetime-message _ui-space">
+          <view class="lifetime-message-item" xhs:for="{{message}}">
+            <view style="text-align: center;">
+              <text xhs:if="{{item.count > 1}}">{{item.count}}次</text>
+              触发了{{item.lifeName}}事件
+            </view>
+            <image style="width: 16px; height: 16px;" src="../../../image/test_success.png"></image>
+          </view>
+        </view>
+      </scroll-view>
+    </box>
+  </showbox>
+
+  <showbox title="下拉刷新事件">
+    <box>
+      <view class="_ui-space">
+        <button class="_ui-button" hover-class="_ui-button-hover" bindtap="startPullDownRefresh">点击下拉</button>
+        <button class="_ui-button" hover-class="_ui-button-hover" bindtap="stopPullDownRefresh">停止刷新</button>
+      </view>
+    </box>
+  </showbox>
+
+  <showbox title="页面滚动事件">
+    <box>
+      <view class="_ui-space">
+        <button class="_ui-button" hover-class="_ui-button-hover" bindtap="generateBox">扩充高度</button>
+        <button class="_ui-button" hover-class="_ui-button-hover" bindtap="notGenerateBox">取消扩充高度</button>
+      </view>
+      <view style="height: {{height}}; transition: all 0.3s;"></view>
+    </box>
+  </showbox>
+</view>