搜也刷新优化

components/fy-header.vue

@@ -5,7 +5,10 @@
         <text v-if="leftLabel" class="leftlab">{{ leftLabel }}</text>
         <text v-else-if="back" class="back">‹</text>
       </view>
-      <text class="title">{{ title }}</text>
+      <view class="mid">
+        <text class="title">{{ title }}</text>
+        <text v-if="extra" class="extra">{{ extra }}</text>
+      </view>
       <view class="right">
         <slot name="right" />
       </view>
@@ -19,7 +22,8 @@ export default {
   props: {
     title: { type: String, default: '' },
     back: { type: Boolean, default: false },
-    leftLabel: { type: String, default: '' }
+    leftLabel: { type: String, default: '' },
+    extra: { type: String, default: '' }
   },
   data() {
     return { status: 20 }
@@ -76,12 +80,16 @@ export default {
   font-weight: 300;
 }
 .leftlab { font-size: 28rpx; color: #1677FF; }
-.title {
+.mid {
   position: absolute;
-  left: 180rpx;
-  right: 180rpx;
-  text-align: center;
-  font-size: 34rpx;
+  left: 160rpx;
+  right: 160rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.title {
+  font-size: 28rpx;
   font-weight: 600;
   color: #111827;
   letter-spacing: 0.2rpx;
@@ -89,4 +97,11 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.extra {
+  margin-left: 6rpx;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #111827;
+  flex-shrink: 0;
+}
 </style>

pages/tabs/messages.vue

@@ -1,15 +1,15 @@
 <template>
   <view class="page msg edge">
-    <fy-header :title="unread ? ('消息(' + unread + ')') : '消息'">
+    <fy-header title="消息" :extra="unreadLabel">
       <template #right>
         <text class="ico" @click="plus">＋</text>
       </template>
     </fy-header>
-    <view class="finder" @click="goSearch">
-      <wd-icon name="search" size="28rpx" color="#9CA3AF" />
-      <text class="finder-txt">搜索</text>
-    </view>
     <fy-scroll class="edge-scroll list" dock @refresh="reload">
+      <view class="finder" @click="goSearch">
+        <wd-icon name="search" size="28rpx" color="#9CA3AF" />
+        <text class="finder-txt">搜索</text>
+      </view>
       <view v-if="!rows.length" class="empty">暂无会话</view>
       <view
         v-for="c in rows"
@@ -52,6 +52,12 @@ export default {
   data() {
     return { rows: [], unread: 0, off: null }
   },
+  computed: {
+    unreadLabel() {
+      if (!this.unread) return ''
+      return '(' + (this.unread > 99 ? '99+' : this.unread) + ')'
+    }
+  },
   onShow() {
     if (this.off) this.off()
     this.guard()