init

xhs-mini-demos/component-case/include/include-template.xhsml

@@ -0,0 +1,4 @@
+<view class="include-container _ui-space" style="background-color: {{color}};">
+    <view style="text-align: center;">我是include模板的内容 数字递增：{{num}}</view>
+    <button style="background-color: {{color === 'red' ? 'blue': 'red'}};" bindtap="onChangeColor" class="_ui-button" hover-class="_ui-button-hover">include内部的按钮</button>
+</view>

xhs-mini-demos/component-case/include/include.css

@@ -0,0 +1,19 @@
+
+.include-container {
+    /* background-color: red; */
+    color: white;
+}
+
+.colorlist {
+    display: flex;
+    justify-content: space-around;
+}
+
+.colorlist text {
+    padding: 5px;
+}
+
+.select_block {
+    border-radius: 1000px;
+    border: 1px solid red;
+}

xhs-mini-demos/component-case/include/include.js

@@ -0,0 +1,23 @@
+Page({
+
+  onShareAppMessage() {
+    return {
+      title: navigationBarTitleText,
+      path: '/api-case/webview/webview',
+    };
+  },
+
+  data: {
+    color: 'red',
+    num: 0
+  },
+
+
+  onChangeColor() {
+    console.log('onChangeColor');
+    this.setData({
+      color: this.data.color === 'red' ? 'blue': 'red',
+      num: this.data.num+1
+    });
+  }
+});

xhs-mini-demos/component-case/include/include.json

@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "include组件",
+    "usingComponents": {
+        "showbox": "../../common/component/showbox/index",
+        "box": "../../common/component/container/index"
+    }
+}

xhs-mini-demos/component-case/include/include.xhsml

@@ -0,0 +1,19 @@
+<view class="container">
+    <include src="include-template.xhsml"/>
+
+    <showbox title="自定义组件内的include模板">
+        <view style="padding: 10px;">
+            <include src="include-template.xhsml"/>
+        </view>
+    </showbox>
+    
+    <showbox title="page页面">
+        <view style="padding: 10px;" class="_ui-space">
+            <view class="colorlist">
+                <text class="{{color === 'red' && 'select_block'}}">红色</text>
+                <text class="{{color === 'blue' && 'select_block'}}">蓝色</text>
+            </view>
+            <button class="_ui-button" hover-class="_ui-button-hover" bindtap="onChangeColor">切换背景颜色</button>
+        </view>
+    </showbox>
+</view>