添加搜索组件弹出标签

App.vue

@@ -5,6 +5,7 @@
       // 全局设置状态栏和导航栏高度
       statusBarH: 0,
       customBarH: 0,
+      screenHeight: 0,
     },
 		onLaunch: function() {
       uni.getSystemInfo({
@@ -31,10 +32,12 @@
           // 注意：此方法不支持原生Nvue页面
           Vue.prototype.statusBarH = statusBar
           Vue.prototype.customBarH = customBar
+          Vue.prototype.screenHeight = e.screenHeight
           
           // 支持nvue页面写法（兼容H5/小程序/APP/APP-Nvue）
           this.globalData.statusBarH = statusBar
           this.globalData.customBarH = customBar
+          this.globalData.screenHeight = e.screenHeight
         }
     })
     },

components/nav-bar.vue

@@ -10,9 +10,16 @@
         <view class="input-view">
           <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
           <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
-            @confirm="confirm" @focus="focus" />
+            @confirm="confirm" @focus="isTag = true" @blur="isTag = false" />
         </view>
     </uni-nav-bar>
+    <view v-if="isTag" class="tagMask" :style="{'height': makerHeigth + 'px', 'top': statusBarH + customBarH + 'px' }">
+      <uni-card title="热门标签">
+        <view class="cardBox">
+          <uni-tag class="tag" v-for="(item, index) in tagList" :key="index" :text="item.name"/>
+        </view>
+			</uni-card>
+    </view>
   </view>
 </template>
 
@@ -20,13 +27,30 @@
 	export default {
 		data() {
 			return {
+        isTag: false,
         statusBarH: 0,
         customBarH: 0,
+        screenHeight: 0,
+        makerHeigth: 0,
 				index: 0,
 				array: [
           { name: '文章', code: 0 },
           { name: '期刊', code: 1 }
-				]
+				],
+        tagList: [
+          { name: '标签1', code: '1' },
+          { name: '标签2', code: '2' },
+          { name: '标签3', code: '3' },
+          { name: '标签10', code: '4' },
+          { name: '标签20', code: '5' },
+          { name: '标签30', code: '6' },
+          { name: '标签13', code: '7' },
+          { name: '标签25', code: '8' },
+          { name: '标签39', code: '9' },
+          { name: '标签17', code: '10' },
+          { name: '标签25', code: '11' },
+          { name: '标签34', code: '12' }
+        ]
 			}
 		},
 		methods: {
@@ -38,17 +62,16 @@
       // 搜索
       confirm(e) {
         console.log('搜索');
-      },
-      // 聚焦
-      focus(e) {
-        console.log('聚焦');
+        this.isTag = false;
       }
     },
     // 获取状态栏和导航条高度
     created() {
       const app = getApp()
-      this.statusBarH = app.globalData.statusBarH
-      this.customBarH = app.globalData.customBarH - this.statusBarH
+      this.statusBarH = app.globalData.statusBarH;
+      this.customBarH = app.globalData.customBarH - this.statusBarH;
+      this.screenHeight = app.globalData.screenHeight;
+      this.makerHeigth = this.screenHeight - app.globalData.customBarH;
     },
 	}
 </script>
@@ -101,4 +124,19 @@ $nav-height: 30px;
 		font-size: 12px;
 		background-color: #f8f8f8;
 	}
+  .tagMask {
+    width: 100vw;
+    // height: 100vh;
+    background: #fff;
+    position: fixed;
+    // top: 0;
+    left: 0;
+  }
+  .cardBox {
+    display: flex;
+    flex-wrap: wrap;
+    .tag {
+      margin: 5px;
+    }
+  }
 </style>

unpackage/dist/dev/mp-weixin/app.json

@@ -63,5 +63,6 @@
   },
   "usingComponents": {
     "navbar": "/components/nav-bar"
-  }
+  },
+  "sitemapLocation": "sitemap.json"
 }

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -8771,7 +8771,7 @@ function resolveLocaleChain(locale) {
 
 /***/ }),
 
-/***/ 96:
+/***/ 79:
 /*!***********************************************************************************************************!*\
   !*** C:/Users/10428/Desktop/框架源码/微前端/代码/magazine-web/uni_modules/uni-icons/components/uni-icons/icons.js ***!
   \***********************************************************************************************************/

unpackage/dist/dev/mp-weixin/components/nav-bar.json

@@ -1,7 +1,9 @@
 {
   "usingComponents": {
     "uni-nav-bar": "/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar",
-    "uni-icons": "/uni_modules/uni-icons/components/uni-icons/uni-icons"
+    "uni-icons": "/uni_modules/uni-icons/components/uni-icons/uni-icons",
+    "uni-card": "/uni_modules/uni-card/components/uni-card/uni-card",
+    "uni-tag": "/uni_modules/uni-tag/components/uni-tag/uni-tag"
   },
   "component": true
 }

unpackage/dist/dev/mp-weixin/components/nav-bar.wxss

@@ -34,4 +34,17 @@
   font-size: 12px;
   background-color: #f8f8f8;
 }
+.tagMask {
+  width: 100vw;
+  background: #fff;
+  position: fixed;
+  left: 0;
+}
+.cardBox {
+  display: flex;
+  flex-wrap: wrap;
+}
+.cardBox .tag {
+  margin: 5px;
+}
 

unpackage/dist/dev/mp-weixin/pages/search/index.js

@@ -1,31 +0,0 @@
-(global["webpackJsonp"] = global["webpackJsonp"] || []).push([["pages/search/index"],{
-
-/***/ 60:
-/*!*************************************************************************************************!*\
-  !*** C:/Users/10428/Desktop/框架源码/微前端/代码/magazine-web/main.js?{"page":"pages%2Fsearch%2Findex"} ***!
-  \*************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/* WEBPACK VAR INJECTION */(function(createPage) {__webpack_require__(/*! uni-pages */ 5);
-var _vue = _interopRequireDefault(__webpack_require__(/*! vue */ 3));
-var _index = _interopRequireDefault(__webpack_require__(/*! ./pages/search/index.vue */ 61));function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}wx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;
-createPage(_index.default);
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 1)["createPage"]))
-
-/***/ }),
-
-/***/ 61:
-/*!******************************************************************************!*\
-  !*** C:/Users/10428/Desktop/框架源码/微前端/代码/magazine-web/pages/search/index.vue ***!
-  \******************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-throw new Error("Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js):\nError: ENOENT: no such file or directory, open 'C:\\Users\\10428\\Desktop\\框架源码\\微前端\\代码\\magazine-web\\pages\\search\\index.vue'");
-
-/***/ })
-
-},[[60,"common/runtime","common/vendor"]]]);
-//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/search/index.js.map

unpackage/dist/dev/mp-weixin/pages/search/index.json

@@ -1,5 +0,0 @@
-{
-  "usingComponents": {
-    "uni-search-bar": "/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar"
-  }
-}

unpackage/dist/dev/mp-weixin/pages/search/index.wxml

@@ -1 +0,0 @@
-<uni-search-bar class="uni-mt-10" vue-id="bda12f3c-1" radius="5" placeholder="搜索内容" clearButton="auto" cancelButton="none" data-event-opts="{{[['^confirm',[['search']]]]}}" bind:confirm="__e" bind:__l="__l"></uni-search-bar>

unpackage/dist/dev/mp-weixin/uni_modules/uni-card/components/uni-card/uni-card.json

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

unpackage/dist/dev/mp-weixin/uni_modules/uni-card/components/uni-card/uni-card.wxss

@@ -0,0 +1,104 @@
+@charset "UTF-8";
+/* 水平间距 */
+/* 水平间距 */
+.uni-card {
+  margin: 10px;
+  padding: 0 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+  background-color: #fff;
+  flex: 1;
+}
+.uni-card .uni-card__cover {
+  position: relative;
+  margin-top: 10px;
+  flex-direction: row;
+  overflow: hidden;
+  border-radius: 4px;
+}
+.uni-card .uni-card__cover .uni-card__cover-image {
+  flex: 1;
+  vertical-align: middle;
+}
+.uni-card .uni-card__header {
+  display: flex;
+  border-bottom: 1px #DCDCDC solid;
+  flex-direction: row;
+  align-items: center;
+  padding: 10px;
+  overflow: hidden;
+}
+.uni-card .uni-card__header .uni-card__header-box {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+}
+.uni-card .uni-card__header .uni-card__header-avatar {
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  border-radius: 5px;
+  margin-right: 10px;
+}
+.uni-card .uni-card__header .uni-card__header-avatar .uni-card__header-avatar-image {
+  flex: 1;
+  width: 40px;
+  height: 40px;
+}
+.uni-card .uni-card__header .uni-card__header-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  overflow: hidden;
+}
+.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
+  font-size: 15px;
+  color: #3a3a3a;
+}
+.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-subtitle {
+  font-size: 12px;
+  margin-top: 5px;
+  color: #909399;
+}
+.uni-card .uni-card__header .uni-card__header-extra {
+  line-height: 12px;
+}
+.uni-card .uni-card__header .uni-card__header-extra .uni-card__header-extra-text {
+  font-size: 12px;
+  color: #909399;
+}
+.uni-card .uni-card__content {
+  padding: 10px;
+  font-size: 14px;
+  color: #6a6a6a;
+  line-height: 22px;
+}
+.uni-card .uni-card__actions {
+  font-size: 12px;
+}
+.uni-card--border {
+  border: 1px solid #DCDCDC;
+}
+.uni-card--shadow {
+  position: relative;
+  box-shadow: 0 1px 8px 1px rgba(165, 165, 165, 0.2);
+}
+.uni-card--full {
+  margin: 0;
+  border-left-width: 0;
+  border-left-width: 0;
+  border-radius: 0;
+}
+.uni-card--full:after {
+  border-radius: 0;
+}
+.uni-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+

unpackage/dist/dev/mp-weixin/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.bak.json

@@ -1,6 +0,0 @@
-{
-  "usingComponents": {
-    "uni-icons": "/uni_modules/uni-icons/components/uni-icons/uni-icons"
-  },
-  "component": true
-}

unpackage/dist/dev/mp-weixin/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.wxss

@@ -1,51 +0,0 @@
-@charset "UTF-8";
-/* 水平间距 */
-/* 水平间距 */
-.uni-searchbar {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  padding: 10px;
-}
-.uni-searchbar__box {
-  display: flex;
-  box-sizing: border-box;
-  overflow: hidden;
-  position: relative;
-  flex: 1;
-  justify-content: center;
-  flex-direction: row;
-  align-items: center;
-  height: 36px;
-  padding: 5px 8px 5px 0px;
-}
-.uni-searchbar__box-icon-search {
-  display: flex;
-  flex-direction: row;
-  padding: 0 8px;
-  justify-content: center;
-  align-items: center;
-  color: #B3B3B3;
-}
-.uni-searchbar__box-search-input {
-  flex: 1;
-  font-size: 14px;
-  color: #333;
-}
-.uni-searchbar__box-icon-clear {
-  align-items: center;
-  line-height: 24px;
-  padding-left: 8px;
-}
-.uni-searchbar__text-placeholder {
-  font-size: 14px;
-  color: #B3B3B3;
-  margin-left: 5px;
-}
-.uni-searchbar__cancel {
-  padding-left: 10px;
-  line-height: 36px;
-  font-size: 14px;
-  color: #333333;
-}
-

unpackage/dist/dev/mp-weixin/uni_modules/uni-tag/components/uni-tag/uni-tag.json

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

unpackage/dist/dev/mp-weixin/uni_modules/uni-tag/components/uni-tag/uni-tag.wxml

@@ -0,0 +1 @@
+<block wx:if="{{text}}"><text data-event-opts="{{[['tap',[['onClick',['$event']]]]]}}" class="{{['uni-tag',classes]}}" style="{{(customStyle)}}" bindtap="__e">{{text}}</text></block>

unpackage/dist/dev/mp-weixin/uni_modules/uni-tag/components/uni-tag/uni-tag.wxss

@@ -0,0 +1,103 @@
+@charset "UTF-8";
+/* 水平间距 */
+/* 水平间距 */
+.uni-tag {
+  line-height: 14px;
+  font-size: 12px;
+  font-weight: 200;
+  padding: 4px 7px;
+  color: #fff;
+  border-radius: 3px;
+  background-color: #8f939c;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #8f939c;
+}
+.uni-tag--default {
+  font-size: 12px;
+}
+.uni-tag--default--inverted {
+  color: #8f939c;
+  border-color: #8f939c;
+}
+.uni-tag--small {
+  padding: 2px 5px;
+  font-size: 12px;
+  border-radius: 2px;
+}
+.uni-tag--mini {
+  padding: 1px 3px;
+  font-size: 12px;
+  border-radius: 2px;
+}
+.uni-tag--primary {
+  background-color: #2979ff;
+  border-color: #2979ff;
+  color: #fff;
+}
+.uni-tag--success {
+  color: #fff;
+  background-color: #18bc37;
+  border-color: #18bc37;
+}
+.uni-tag--warning {
+  color: #fff;
+  background-color: #f3a73f;
+  border-color: #f3a73f;
+}
+.uni-tag--error {
+  color: #fff;
+  background-color: #e43d33;
+  border-color: #e43d33;
+}
+.uni-tag--primary--inverted {
+  color: #2979ff;
+  border-color: #2979ff;
+}
+.uni-tag--success--inverted {
+  color: #18bc37;
+  border-color: #18bc37;
+}
+.uni-tag--warning--inverted {
+  color: #f3a73f;
+  border-color: #f3a73f;
+}
+.uni-tag--error--inverted {
+  color: #e43d33;
+  border-color: #e43d33;
+}
+.uni-tag--inverted {
+  background-color: #fff;
+}
+.uni-tag--circle {
+  border-radius: 15px !important;
+}
+.uni-tag--mark {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-top-right-radius: 15px !important;
+  border-bottom-right-radius: 15px !important;
+}
+.uni-tag--disabled {
+  opacity: 0.5;
+}
+.uni-tag-text {
+  color: #fff;
+  font-size: 14px;
+}
+.uni-tag-text--primary {
+  color: #2979ff;
+}
+.uni-tag-text--success {
+  color: #18bc37;
+}
+.uni-tag-text--warning {
+  color: #f3a73f;
+}
+.uni-tag-text--error {
+  color: #e43d33;
+}
+.uni-tag-text--small {
+  font-size: 12px;
+}
+