flat: 视频版本0.1

pages/chat/chat.vue

@@ -62,10 +62,11 @@
             <view class="chatmain-warpper">
                 <ai-paging ref="paging"></ai-paging>
             </view>
+            <!-- 自定义tabbar -->
+            <view class="chatmain-footer" v-show="!isDrawerOpen">
+                <Tabbar :currentpage="2"></Tabbar>
+            </view>
         </view>
-
-        <!-- 自定义tabbar -->
-        <!-- <tabbar-custom :currentpage="2"></tabbar-custom> -->
     </view>
 </template>
 
@@ -73,6 +74,7 @@
 import { ref, inject, nextTick, computed } from 'vue';
 const { $api, navTo, insertSortData } = inject('globalFunction');
 import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
+import Tabbar from '@/components/tabbar/midell-box.vue';
 import useChatGroupDBStore from '@/stores/userChatGroupStore';
 import useUserStore from '@/stores/useUserStore';
 import aiPaging from './components/ai-paging.vue';
@@ -108,16 +110,16 @@ onHide(() => {
     paging.value?.handleTouchCancel();
     if (isDrawerOpen.value) {
         isDrawerOpen.value = false;
-        uni.showTabBar();
+        // uni.showTabBar();
     }
 });
 
 const toggleDrawer = () => {
     isDrawerOpen.value = !isDrawerOpen.value;
     if (isDrawerOpen.value) {
-        uni.hideTabBar();
+        // uni.hideTabBar();
     } else {
-        uni.showTabBar();
+        // uni.showTabBar();
     }
 };
 
@@ -144,6 +146,7 @@ function updateSetting() {
 
 <style lang="stylus" scoped>
 header-height = 88rpx
+footer-height = 98rpx
 
 /* 页面容器 */
 .container {
@@ -277,6 +280,8 @@ header-height = 88rpx
     transition: margin-left 0.3s ease-in-out;
     position: relative
     background: #FFFFFF
+    display: flex
+    flex-direction: column
     .head
         display: block;
         box-sizing: border-box;
@@ -304,15 +309,20 @@ header-height = 88rpx
             height: 37rpx;
 
 .chatmain-warpper
-    height: 'calc(100% - %s)' % header-height
+    height: 'calc(100% - %s)' %( header-height + footer-height)
     position: relative;
     display: block;
     box-sizing: border-box;
     width: 100%;
     border-top: 2rpx solid #F4F4F4;
+    flex: 1
 
 /* 页面被挤压时向右移动 */
 .main-content.shift {
     margin-left: 500rpx;
 }
-</style>
+
+.chatmain-footer{
+    height: footer-height;
+}
+</style>