feat: skyline模式下的自定义路由

miniprogram/app.json

@@ -298,6 +298,18 @@
         "examples/app-bar/pages/detail/index"
       ]
     },
+    {
+      "root": "packageSkylineRouter",
+      "pages": [
+        "pages/preset-router/index/index",
+        "pages/preset-router/list/index",
+        "pages/open-container/index/index",
+        "pages/open-container/detail/index",
+        "pages/open-container/other/index",
+        "pages/page-return-gesture/index/index"
+      ],
+      "renderer": "skyline"
+    },
     {
       "root": "packageXRFrame",
       "pages": [
@@ -402,6 +414,12 @@
         "packageComponent"
       ]
     },
+    "page/animation/index": {
+      "network": "all",
+      "packages": [
+        "packageSkylineRouter"
+      ]
+    },
     "page/API/index": {
       "network": "all",
       "packages": [

miniprogram/packageSkylineRouter/components/example-card/index.js

@@ -0,0 +1,24 @@
+// components/example-card/index.js
+Component({
+
+  /**
+   * Component properties
+   */
+  properties: {
+
+  },
+
+  /**
+   * Component initial data
+   */
+  data: {
+
+  },
+
+  /**
+   * Component methods
+   */
+  methods: {
+
+  }
+})

miniprogram/packageSkylineRouter/components/example-card/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/packageSkylineRouter/components/example-card/index.wxml

@@ -0,0 +1,14 @@
+<view class="container">
+  <view class="img-wrap center">
+    <image mode="aspectFit" class="img" src="/assets/play.png"></image>
+  </view>
+
+  <view class="intro">
+    <view class="title">Title</view>
+    <view class="sub-title">Secondary text</view>
+    <view class="content">
+      Lorem ipsum dolor sit amet, consectetur 
+      adipiscing elit, sed do eiusmod tempor.
+    </view>
+  </view>
+</view>

miniprogram/packageSkylineRouter/components/example-card/index.wxss

@@ -0,0 +1,46 @@
+/* components/example-card/index.wxss */
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 300px;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0px 1px 2px 1px #E3E8E5;
+}
+
+.img-wrap {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.38);
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.intro {
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 14px;
+  padding: 16px;
+  font-style: italic;
+}
+
+.title {
+  color: #000;
+  font-size: 20px;
+}
+
+.img {
+  width: 100px;
+  height: 100px;
+}
+
+.content {
+  margin-top: 16px;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.54);
+}

miniprogram/packageSkylineRouter/components/example-single-title/index.js

@@ -0,0 +1,24 @@
+// components/example-card/index.js
+Component({
+
+  /**
+   * Component properties
+   */
+  properties: {
+
+  },
+
+  /**
+   * Component initial data
+   */
+  data: {
+
+  },
+
+  /**
+   * Component methods
+   */
+  methods: {
+
+  }
+})

miniprogram/packageSkylineRouter/components/example-single-title/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/packageSkylineRouter/components/example-single-title/index.wxml

@@ -0,0 +1,12 @@
+<view class="container">
+  <view class="img-wrap center">
+    <image mode="aspectFit" class="img" src="/assets/play.png"></image>
+  </view>
+
+  <view class="intro">
+    <view class="title">Title</view>
+    <view class="content">
+      Lorem ipsum dolor sit, consectetur adipiscing elit
+    </view>
+  </view>
+</view>

miniprogram/packageSkylineRouter/components/example-single-title/index.wxss

@@ -0,0 +1,49 @@
+/* components/example-card/index.wxss */
+.container {
+  display: flex;
+  flex-direction: row;
+  height: 100px;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0px 1px 2px 1px #E3E8E5;
+}
+
+.img-wrap {
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.38);
+}
+
+.img {
+  width: 60px;
+  height: 60px;
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.intro {
+  flex: 1;
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 14px;
+  font-style: italic;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding:0 20px;
+}
+
+.title {
+  color: #000;
+  font-size: 20px;
+}
+
+.content {
+  margin-top: 16px;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.54);
+}

miniprogram/packageSkylineRouter/components/float-action-button/index.js

@@ -0,0 +1,28 @@
+// components/float-action-button/index.js
+Component({
+
+  /**
+   * Component properties
+   */
+  properties: {
+
+  },
+
+  options: {
+    virtualHost: true
+  },
+
+  /**
+   * Component initial data
+   */
+  data: {
+
+  },
+
+  /**
+   * Component methods
+   */
+  methods: {
+
+  }
+})

miniprogram/packageSkylineRouter/components/float-action-button/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/packageSkylineRouter/components/float-action-button/index.wxml

@@ -0,0 +1,4 @@
+<!--components/float-action-button/index.wxml-->
+<view class="float-button">
+  +
+</view>

miniprogram/packageSkylineRouter/components/float-action-button/index.wxss

@@ -0,0 +1,14 @@
+/* components/float-action-button/index.wxss */
+.float-button {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background-color: plum;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  position: absolute;
+  right: 20px;
+  bottom: 60px;
+}

miniprogram/packageSkylineRouter/components/small-card/index.js

@@ -0,0 +1,24 @@
+// components/example-card/index.js
+Component({
+
+  /**
+   * Component properties
+   */
+  properties: {
+
+  },
+
+  /**
+   * Component initial data
+   */
+  data: {
+
+  },
+
+  /**
+   * Component methods
+   */
+  methods: {
+
+  }
+})

miniprogram/packageSkylineRouter/components/small-card/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/packageSkylineRouter/components/small-card/index.wxml

@@ -0,0 +1,10 @@
+<view class="container">
+  <view class="img-wrap center">
+    <image mode="aspectFit" class="img" src="/assets/play.png"></image>
+  </view>
+
+  <view class="intro">
+    <view class="title">Title</view>
+    <view class="sub-title">Secondary</view>
+  </view>
+</view>

miniprogram/packageSkylineRouter/components/small-card/index.wxss

@@ -0,0 +1,49 @@
+/* components/example-card/index.wxss */
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 225px;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0px 1px 2px 1px #E3E8E5;
+}
+
+.img-wrap {
+  height: 150px;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.38);
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.intro {
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 14px;
+  padding: 10px;
+  font-style: italic;
+}
+
+.title {
+  color: #000;
+  font-size: 20px;
+}
+
+.sub-title {
+  margin-top: 4px;
+}
+
+.img {
+  width: 80px;
+  height: 80px;
+}
+
+.content {
+  margin-top: 16px;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.54);
+}