全面svg化以及设备页实现list滚动

quickapp/src/manifest.json

@@ -4,7 +4,7 @@
   "versionName": "1.0.0",
   "versionCode": 1,
   "minPlatformVersion": 1070,
-  "icon": "/assets/images/logo.png",
+  "icon": "/assets/images/logo.svg",
   "features": [
     {
       "name": "system.prompt"
@@ -36,7 +36,7 @@
       },
       "pages/Home": {
         "component": "index",
-        "launchMode":"singleTask"
+        "launchMode": "singleTask"
       }
     }
   },
@@ -46,7 +46,10 @@
     "pages": {
       "pages": {
         "titleBar": false
+      },
+      "pages/Home": {
+        "titleBar": false
       }
     }
   }
-}
+}

quickapp/src/pages/Device/card.ux

@@ -1,21 +1,25 @@
 <template>
-  <div class="card">
+  <list-item type="device" class="card">
     <div class="icon">
       <image src="{{ devObj.icon}}" />
     </div>
     <text class="label">{{ devObj.name }}</text>
-  </div>
+  </list-item>
 </template>
 
 <script>
 export default {
 
-  props: {
-    devObj: { default: { icon: "/assets/images/device-ipad.png", name: "Easy’s iPad(当前设备)" } },
+  props: ['devObj'],
+
+  data: {
+    defaultDevObj: { icon: "/assets/images/device-ipad.svg", name: "Easy’s iPad(当前设备)" },
   },
 
   onInit() {
-    console.log('card', this.devObj, this.devObj.name)
+    if (!this.devObj) this.devObj = this.defaultDevObj
+    // console.log('card', this.devObj)
+    // console.log('card', 'name', this.devObj.name)
   }
 }
 </script>
@@ -24,17 +28,17 @@ export default {
 @color: #3b4789;
 
 .card {
-  width: 80%;
   border-color: @color;
   border-radius: 16px;
   border-width: 3px;
   padding: 32px;
   margin: 24px 0;
+  background-color: #FFFFFF;
   /* justify-content: center;
   align-items: center; */
 
   .icon {
-    width: 130px;
+    width: 120px;
     height: 80px;
     margin-right: 16px;
     justify-content: center;

quickapp/src/pages/Device/index.ux

@@ -3,15 +3,30 @@
   <div class="wrapper">
     <!-- <text class="title">device</text>
     <text class="title">device</text> -->
-    <card></card>
-    <card dev-obj="{{ dev }}"></card>
+    <div class="header">
+      <text>设备</text>
+      <image src="/assets/images/plus.svg" />
+    </div>
+    <list style="width: 80%">
+      <card></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+    </list>
   </div>
 </template>
 
 <script>
 export default {
   data: {
-    dev: { icon: "/assets/images/device-iphone.png", name: "备用机iPhone13" },
+    dev: { icon: "/assets/images/device-iphone.svg", name: "备用机iPhone13" },
   },
 
   onInit() { }
@@ -24,5 +39,17 @@ export default {
 .wrapper {
   .flex-box-mixins(column, flex-start, center);
   width: 100%;
+  padding-top: 84px;
+
+  .header {
+    margin-bottom: 24px;
+    width: 80%;
+    justify-content: space-between;
+
+    text {
+      font-size: 48px;
+      color: #000000;
+    }
+  }
 }
 </style>

quickapp/src/pages/Home/index.ux

@@ -23,28 +23,24 @@ export default {
         selectedIconPath: '/assets/images/tabbar-device-active.svg',
         active: true,
         compName: 'device',
-        title: '设备'
       },
       {
         iconPath: '/assets/images/tabbar-key.svg',
         selectedIconPath: '/assets/images/tabbar-key-active.svg',
         active: false,
         compName: 'key',
-        title: 'Key'
       },
       {
         iconPath: '/assets/images/tabbar-message.svg',
         selectedIconPath: '/assets/images/tabbar-message-active.svg',
         active: false,
         compName: 'message',
-        title: '消息'
       },
       {
         iconPath: '/assets/images/tabbar-settings.svg',
         selectedIconPath: '/assets/images/tabbar-settings-active.svg',
         active: false,
         compName: 'settings',
-        title: '设置'
       }
     ]
   },
@@ -58,10 +54,10 @@ export default {
   emitEvt({ detail: { idx: newIdx } } = evt) {
     // console.log('home', 'emitEvt', 'newIdx', newIdx)
     // console.log('home', 'emitEvt', 'tabbarData', this.tabbarData)
-    this.tabbarData[this.currentPageIndex].active = false;
-    this.tabbarData[newIdx].active = true;
+    // 解构交换变量
+    [this.tabbarData[this.currentPageIndex].active, this.tabbarData[newIdx].active]
+      = [this.tabbarData[newIdx].active, this.tabbarData[this.currentPageIndex].active]
     this.currentPageIndex = newIdx
-    this.$page.setTitleBar({ text: this.tabbarData[newIdx].title })
   },
 }
 </script>
@@ -72,15 +68,12 @@ export default {
   .flex-box-mixins(column, center, center);
 
   .stack {
-    /* width: 100%; */
     flex-grow: 1;
     align-items: flex-end;
 
     .deer-background {
-      /* position: fixed; */
       width: 100%;
       margin-bottom: 20px;
-      /* bottom: 200px; */
     }
   }
 }

quickapp/src/pages/Home/tabbar.ux

@@ -50,28 +50,16 @@ export default {
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      width: 60px;
     }
 
     image {
-      /* width: 58px; */
       height: 80px;
     }
 
     text {
       font-size: 30px;
     }
   }
-
-  /* .selected {
-    color: #0091ff;
-  }
-
-  .tab-recommend {
-    left: 0;
-  }
-
-  .tab-mine {
-    right: 0;
-  } */
 }
 </style>