flat: 优化，还是使用原生Tabbar,empty优化

App.vue

@@ -124,11 +124,22 @@ function loginCallback(userInfo) {
 /*每个页面公共css */
 @import '@/common/animation.css';
 @import '@/common/common.css';
-/* 修改pages tabbar样式 H5有效 */
+
+/* 修改pages tabbar样式 H5才有效 */
 .uni-tabbar .uni-tabbar__item:nth-child(4) .uni-tabbar__bd .uni-tabbar__icon {
-    height: 110rpx !important;
+    width: 108rpx !important;
-    width: 122rpx !important;
+    height: 98rpx !important;
-    margin-top: 6rpx;
+    margin-top: 0rpx;
+    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    transform-origin: center center;
+    /* transition: transform 0.15s ease-in-out; */
+    /* transform-origin: center center; */
+}
+
+.uni-tabbar .uni-tabbar__item:nth-child(4) .uni-tabbar__bd .uni-tabbar__icon:active {
+    transform: scale(0.8);
+    transition: transform 0.1s ease-out;
+    /* animation: jelly 0.5s; */
 }
 
 .uni-tabbar-border {

common/animation.css

@@ -191,3 +191,37 @@
     -webkit-animation-name: tada;
     animation-name: tada
 }
+
+@keyframes jelly {
+    0% {
+        transform: scale(1);
+    }
+
+    30% {
+        transform: scale(1.25, 0.75);
+    }
+
+    /* 压扁 */
+    40% {
+        transform: scale(0.75, 1.25);
+    }
+
+    /* 拉长 */
+    50% {
+        transform: scale(1.15, 0.85);
+    }
+
+    /* 稍微压扁 */
+    65% {
+        transform: scale(0.95, 1.05);
+    }
+
+    /* 稍微拉长 */
+    75% {
+        transform: scale(1.05, 0.95);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}

common/common.css

@@ -469,3 +469,7 @@ html {
 .grayscale {
     filter: grayscale(100%) opacity(0.6);
 }
+
+.height-100 {
+    height: 100%;
+}

components/empty/empty.vue

@@ -1,5 +1,9 @@
 <template>
-    <view class="empty" :style="{ background: bgcolor, marginTop: mrTop + 'rpx' }">
+    <view
+        class="empty"
+        :class="{ 'position-center': isPosition }"
+        :style="{ background: bgcolor, marginTop: mrTop + 'rpx' }"
+    >
         <view class="ty_content" :style="{ paddingTop: pdTop + 'rpx' }">
             <view class="content_top">
                 <!-- <view class="content_top btn-shaky"> -->
@@ -30,18 +34,23 @@ export default {
         pdTop: {
             type: String,
             required: false,
-            default: '80',
+            default: '0',
         },
         mrTop: {
             type: String,
             required: false,
-            default: '20',
+            default: '0',
         },
         pictrue: {
             type: String,
             required: false,
             default: '',
         },
+        isPosition: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     methods: {},
 };
@@ -52,19 +61,33 @@ image {
     width: 100%;
     height: 100%;
 }
+.position-center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
 .empty {
     width: 100%;
-    min-height: 100vh;
+    height: 100%;
-    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    // min-height: 100vh;
+    // height: 400rpx;
+    // position: relative;
     .ty_content {
-        position: absolute;
-        left: 50%;
-        top: 0;
-        transform: translate(-50%, 0);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        // position: absolute;
+        // left: 50%;
+        // top: 0;
+        // transform: translate(-50%, 0);
+
         .content_top {
             width: 450rpx;
             height: 322rpx;

packageA/pages/Intendedposition/Intendedposition.vue

@@ -5,9 +5,9 @@
             seeDate="applyTime"
             :list="pageState.list"
             :longitude="longitudeVal"
-            :latitude="latitudeVal">
+            :latitude="latitudeVal"
-        </renderDeliveryRecord>
+        ></renderDeliveryRecord>
-        <empty v-else pdTop="200"></empty>
+        <empty v-else :is-position="true"></empty>
     </view>
 </template>
 
@@ -75,7 +75,8 @@ function getJobList(type = 'add') {
 .collection-content{
     padding: 1rpx 28rpx 20rpx 28rpx;
     background: #F4F4F4;
-    height: 100%
+    height: 100%;
     min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
+    position: relative;
 }
 </style>

packageA/pages/UnitDetails/UnitDetails.vue

@@ -62,7 +62,7 @@
                         :longitude="longitudeVal"
                         :latitude="latitudeVal"
                     ></renderJobs>
-                    <empty v-else pdTop="200"></empty>
+                    <empty v-else :is-position="true"></empty>
                 </view>
             </scroll-view>
         </view>
@@ -184,10 +184,12 @@ function getThirdPartyJobsList(type = 'add') {
         pageSize: pageState.pageSize,
     };
 
-    $api.createRequest(`/app/internal/jobThirdPart?gsID=${companyId}&gsmc=${companyName}&zphID=${zphId}`, params).then((resData) => {
+    $api.createRequest(`/app/internal/jobThirdPart?gsID=${companyId}&gsmc=${companyName}&zphID=${zphId}`, params).then(
-        const { rows, total } = resData;
+        (resData) => {
-        handleJobsListResponse(type, rows, total, 'current');
+            const { rows, total } = resData;
-    });
+            handleJobsListResponse(type, rows, total, 'current');
+        }
+    );
 }
 
 function getOriginalJobsList(type = 'add') {
@@ -322,6 +324,8 @@ image {
     background: #F4F4F4;
     .views{
         padding: 28rpx
+        min-height: calc(100% - 56rpx)
+        position: relative
         .Detail-title{
             font-weight: 600;
             font-size: 32rpx;

packageA/pages/browseJob/browseJob.vue

@@ -24,15 +24,14 @@
             </view>
             <scroll-view scroll-y class="main-scroll" @scrolltolower="getJobList('add')">
                 <view class="one-cards">
-                        <renderJobViewRecord
+                    <renderJobViewRecord
-                            :list="pageState.list"
+                        :list="pageState.list"
-                            v-if="pageState.list.length"
+                        v-if="pageState.list.length"
-                            :longitude="longitudeVal"
+                        :longitude="longitudeVal"
-                            :latitude="latitudeVal"
+                        :latitude="latitudeVal"
-                        ></renderJobViewRecord>
+                    ></renderJobViewRecord>
-                        <empty v-else pdTop="200"></empty>
+                    <empty v-else></empty>
-                        <!-- <loadmore ref="loadmoreRef"></loadmore> -->
+                    <!-- <loadmore ref="loadmoreRef"></loadmore> -->
-         
                 </view>
             </scroll-view>
         </view>
@@ -87,8 +86,6 @@ function toSelectDate() {
     });
 }
 
-
-
 function searchCollection(e) {
     const value = e.detail.value;
     pageState.search.jobTitle = value;
@@ -216,6 +213,6 @@ image {
 .one-cards{
     padding: 0 20rpx 20rpx 20rpx;
     background: #f4f4f4
-
+    height: 100%
 }
 </style>

packageA/pages/choicenessList/choicenessList.vue

@@ -27,7 +27,7 @@
                 :longitude="longitudeVal"
                 :latitude="latitudeVal"
             ></renderCompanys>
-            <empty v-else pdTop="200"></empty>
+            <empty v-else is-position></empty>
         </view>
     </AppLayout>
 </template>
@@ -151,6 +151,8 @@ image {
 }
 .main-list{
     background-color: #F4F4F4;
-    padding: 1rpx 28rpx 28rpx 28rpx
+    padding: 1rpx 28rpx 28rpx 28rpx;
+    min-height: calc(100% - 29rpx);
+    position: relative
 }
 </style>

packageA/pages/collection/collection.vue

@@ -26,7 +26,7 @@
                                     :longitude="longitudeVal"
                                     :latitude="latitudeVal"
                                 ></renderJobCollectionRecord>
-                                <empty v-else pdTop="200"></empty>
+                                <empty v-else></empty>
                             </view>
                         </scroll-view>
                     </swiper-item>
@@ -44,7 +44,7 @@
                                     :longitude="longitudeVal"
                                     :latitude="latitudeVal"
                                 ></renderCompanyCollectionRecord>
-                                <empty v-else pdTop="200"></empty>
+                                <empty v-else></empty>
                             </view>
                         </scroll-view>
                     </swiper-item>
@@ -262,6 +262,7 @@ function getCompanyList(type = 'add') {
         .swiper{
             height: 100%
             .mian{
+                height: 100%
                 padding: 0 28rpx 28rpx 28rpx
             }
         }

packageA/pages/exhibitors/exhibitors.vue

@@ -83,7 +83,7 @@
                         :longitude="longitudeVal"
                         :latitude="latitudeVal"
                     ></renderCompanysOutData>
-                    <empty v-else pdTop="200"></empty>
+                    <empty v-else is-position></empty>
                 </view>
             </scroll-view>
         </view>
@@ -433,6 +433,8 @@ image {
     background: #F4F4F4;
     .views{
         padding: 28rpx
+        min-height: calc(100% - 56rpx);
+        position: relative
         .Detail-title{
             font-weight: 600;
             font-size: 32rpx;

packageA/pages/reservation/reservation.vue

@@ -12,10 +12,19 @@
             </view>
         </view>
         <view class="main">
-            <scroll-view scroll-y>
+            <scroll-view class="height-100" scroll-y>
                 <view v-if="pageState.list.length">
                     <view class="card" v-for="(item, index) in pageState.list" :key="index">
-                        <view @click="navTo('/packageA/pages/exhibitors/exhibitors?jobFairId=' + item.zphID + '&jobFairName=' + item.zphmc)">
+                        <view
+                            @click="
+                                navTo(
+                                    '/packageA/pages/exhibitors/exhibitors?jobFairId=' +
+                                        item.zphID +
+                                        '&jobFairName=' +
+                                        item.zphmc
+                                )
+                            "
+                        >
                             <view class="card-row">
                                 <Countdown :startTime="item.zphjbsj" :endTime="item.zphjzsj" />
                             </view>
@@ -37,7 +46,7 @@
                         </view>
                     </view>
                 </view>
-                <empty v-else pdTop="200"></empty>
+                <empty v-else></empty>
             </scroll-view>
         </view>
     </view>
@@ -72,7 +81,7 @@ const ranOptions = ref([
 ]);
 
 function isTimePassed(timeStr) {
-    if(!timeStr) return false
+    if (!timeStr) return false;
     const targetTime = new Date(timeStr.replace(/-/g, '/')).getTime(); // 兼容格式
     const now = Date.now();
     return now < targetTime;
@@ -95,16 +104,14 @@ function updateCancel(item) {
         content: '确定要取消预约吗?',
         showCancel: true,
         success: ({ confirm, cancel }) => {
-            if(confirm){
+            if (confirm) {
-                 $api.createRequest(`/app/fair/collection/${fairId}`, {}, 'DELETE').then((resData) => {
+                $api.createRequest(`/app/fair/collection/${fairId}`, {}, 'DELETE').then((resData) => {
                     getList('refresh');
                     $api.msg('取消预约成功');
                 });
             }
-        }
+        },
-    })
+    });
-    
-    
 }
 
 function getList(type = 'add', loading = true) {

pages.json

@@ -227,8 +227,8 @@
         ]
     }],
     "tabBar": {
-        "custom": true,
+        // "custom": true,
-        "display": "none",
+        // "display": "none",
         "color": "#5E5F60",
         "selectedColor": "#256BFA",
         "borderStyle": "black",

pages/careerfair/careerfair copy.vue

@@ -122,7 +122,7 @@ onLoad(() => {
         startDate: currentDate,
     });
     weekList.value = result;
-    currentDay.value.fullDate = result[0].fullDate
+    currentDay.value.fullDate = result[0].fullDate;
     getFair('refresh');
 });
 
@@ -162,12 +162,11 @@ function seemsg(index) {
 }
 
 const handleScrollToLower = () => {
-    return
+    return;
     getFair();
     console.log('触底');
 };
 
-
 function getFair(type = 'add') {
     if (type === 'refresh') {
         pageState.page = 1;
@@ -194,7 +193,7 @@ function getFair(type = 'add') {
             // const end = fairList.value.length;
             // const reslist = rows;
             // fairList.value.splice(str, end, ...reslist);
-            fairList.value = rows
+            fairList.value = rows;
         } else {
             fairList.value = rows;
         }

pages/careerfair/careerfair.vue

@@ -94,10 +94,10 @@
                             <view class="card-footer">内容简介：{{ item.zphjj }}</view>
                         </view>
                     </view>
-                    <empty v-else pdTop="200"></empty>
+                    <empty v-else></empty>
                 </scroll-view>
             </view>
-            <Tabbar :currentpage="1"></Tabbar>
+            <!-- <Tabbar :currentpage="1"></Tabbar> -->
         </view>
     </view>
 </template>

pages/chat/chat.vue

@@ -63,9 +63,9 @@
                 <ai-paging ref="paging"></ai-paging>
             </view>
             <!-- 自定义tabbar -->
-            <view class="chatmain-footer" v-show="!isDrawerOpen">
+            <!-- <view class="chatmain-footer" v-show="!isDrawerOpen">
                 <Tabbar :currentpage="2"></Tabbar>
-            </view>
+            </view> -->
         </view>
     </view>
 </template>
@@ -213,27 +213,48 @@ footer-height = 98rpx
     background: #FFFFFF;
     display: flex
     flex-direction: column
-    .drawer-user
+    .drawer-user {
-        border-top: 1rpx solid rgba(0,0,0,.1);
+        display: flex;
-        padding: 20rpx 28rpx
+        align-items: center;
-        display: flex
+        width: 100%;
+        box-sizing: border-box;
+        padding: 24rpx 32rpx;
+        padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
+        padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+        border-top: 1rpx solid rgba(0, 0, 0, 0.06);
+        background-color: #ffffff;
+        color: #333333;
         font-weight: 500;
-        align-items: center
+        font-size: 28rpx;
-        position: relative
+
-        margin-bottom: calc( 32rpx + var(--window-bottom)); /*兼容 IOS<11.2*/
+        &:active {
-        margin-bottom: calc( 32rpx +var(--window-bottom)); /*兼容 IOS>11.2*/
+            background-color: #f9f9f9;
-        color: #000000
+        }
-        .drawer-user-img
+
-            width: 57.2rpx;
+        .drawer-user-img {
-            height: 57.2rpx
+            width: 60rpx;
-            margin-right: 20rpx
+            height: 60rpx;
-        .drawer-user-setting
+            border-radius: 50%;
-            width: 48rpx
+            margin-right: 24rpx;
-            height: 48rpx
+            background-color: #eee;
-            position: absolute
+            flex-shrink: 0;
-            top: 50%
+        }
-            right: 28rpx
+
-            transform: translate(0,-50%)
+        .user-name {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 30rpx;
+        }
+
+        .drawer-user-setting {
+            width: 48rpx;
+            height: 48rpx;
+            margin-left: auto;
+            opacity: 0.8;
+        }
+    }
     .drawer-title
         height: header-height;
         line-height: header-height;

pages/index/components/index-one.vue

@@ -142,7 +142,7 @@
                     </custom-waterfalls-flow>
                     <loadmore ref="loadmoreRef"></loadmore>
                 </view>
-                <empty v-else pdTop="200"></empty>
+                <empty v-else></empty>
             </scroll-view>
         </view>
         <!-- 筛选 -->

pages/index/index.vue

@@ -41,7 +41,7 @@
                 </swiper>
             </view>
 
-            <Tabbar v-show="showTabbar" :currentpage="0"></Tabbar>
+            <!-- <Tabbar v-show="showTabbar" :currentpage="0"></Tabbar> -->
 
             <!-- maskFristEntry -->
             <view class="maskFristEntry" v-if="maskFristEntry">

pages/mine/mine.vue

@@ -95,9 +95,9 @@
                 ></uni-popup-dialog>
             </uni-popup>
         </view>
-        <template #footer>
+        <!-- <template #footer>
             <Tabbar :currentpage="4"></Tabbar>
-        </template>
+        </template> -->
     </AppLayout>
 </template>
 

pages/msglog/msglog.vue

@@ -40,7 +40,7 @@
                 </swiper>
             </view>
 
-            <Tabbar :currentpage="3"></Tabbar>
+            <!-- <Tabbar :currentpage="3"></Tabbar> -->
         </view>
     </view>
 </template>

pages/nearby/components/four.vue

@@ -75,8 +75,8 @@
                     :longitude="longitudeVal"
                     :latitude="latitudeVal"
                 ></renderJobs>
-                <empty v-else pdTop="60"></empty>
+                <empty v-else></empty>
-                <loadmore ref="loadmoreRef"></loadmore>
+                <loadmore v-show="list.length > pageState.pageSize" ref="loadmoreRef"></loadmore>
             </view>
         </view>
         <!-- 筛选 -->
@@ -340,6 +340,7 @@ defineExpose({ loadData, handleFilterConfirm });
     color:  #4778EC !important
 .nearby-scroll
     overflow: hidden;
+    height: 100%;
     .two-head
         margin: 22rpx;
         display: flex;
@@ -380,8 +381,10 @@ defineExpose({ loadData, handleFilterConfirm });
             border-radius: 12rpx 12rpx 12rpx 12rpx;
 .nearby-list
     border-top: 2rpx solid #EBEBEB;
-    height: 100%
+    height: calc(100% - 140rpx)
+    background: #f4f4f4
     .one-cards{
+        height: 100%
         display: flex;
         flex-direction: column;
         padding: 0 20rpx 20rpx 20rpx;
@@ -389,6 +392,7 @@ defineExpose({ loadData, handleFilterConfirm });
     }
     .nav-filter
         padding: 16rpx 28rpx 0 28rpx
+        background: #ffffff
         .filter-top
             display: flex
             justify-content: space-between;

pages/nearby/components/one.vue

@@ -80,8 +80,8 @@
                     :longitude="longitudeVal"
                     :latitude="latitudeVal"
                 ></renderJobs>
-                <empty v-else pdTop="60"></empty>
+                <empty v-else></empty>
-                <loadmore ref="loadmoreRef"></loadmore>
+                <loadmore v-show="list.length > pageState.pageSize" ref="loadmoreRef"></loadmore>
             </view>
         </view>
         <!-- 筛选 -->
@@ -364,11 +364,14 @@ defineExpose({ loadData, handleFilterConfirm });
 }
 .nearby-scroll
     overflow: hidden;
+    height: 100%;
     .nearby-map
         height: 767rpx;
         background: #e8e8e8;
         overflow: hidden
 .nearby-list
+    height: calc(100% - 384rpx)
+    background: #f4f4f4
     .one-cards{
         display: flex;
         flex-direction: column;
@@ -378,6 +381,7 @@ defineExpose({ loadData, handleFilterConfirm });
     }
     .nav-filter
         padding: 16rpx 28rpx 0 28rpx
+        background: #ffffff
         .filter-top
             display: flex
             justify-content: space-between;

pages/nearby/components/three.vue

@@ -101,8 +101,8 @@
                     :longitude="longitudeVal"
                     :latitude="latitudeVal"
                 ></renderJobs>
-                <empty v-else pdTop="60"></empty>
+                <empty v-else></empty>
-                <loadmore ref="loadmoreRef"></loadmore>
+                <loadmore v-show="list.length > pageState.pageSize" ref="loadmoreRef"></loadmore>
             </view>
         </view>
         <!-- 筛选 -->
@@ -359,8 +359,9 @@ defineExpose({ loadData, handleFilterConfirm });
     color:  #4778EC !important;
 .nearby-scroll
     overflow: hidden;
+    height: 100%
     .three-head
-        margin: 24rpx 0 0 0;
+        // margin: 24rpx 0 0 0;
         padding: 26rpx 0 0 0;
         border-radius: 17rpx 17rpx 17rpx 17rpx;
         .one-picker
@@ -482,7 +483,10 @@ defineExpose({ loadData, handleFilterConfirm });
                     z-index: 1;
 .nearby-list
     border-top: 2rpx solid #EBEBEB;
+    height: calc(100% - 222rpx)
+    background: #f4f4f4
     .one-cards{
+        height: 100%
         display: flex;
         flex-direction: column;
         padding: 0 20rpx 20rpx 20rpx;
@@ -490,6 +494,7 @@ defineExpose({ loadData, handleFilterConfirm });
     }
     .nav-filter
         padding: 16rpx 28rpx 0 28rpx
+        background: #ffffff
         .filter-top
             display: flex
             justify-content: space-between;

pages/nearby/components/two.vue

@@ -71,8 +71,8 @@
                     :longitude="longitudeVal"
                     :latitude="latitudeVal"
                 ></renderJobs>
-                <empty v-else pdTop="60"></empty>
+                <empty v-else></empty>
-                <loadmore ref="loadmoreRef"></loadmore>
+                <loadmore v-show="list.length > pageState.pageSize" ref="loadmoreRef"></loadmore>
             </view>
         </view>
         <!-- 筛选 -->
@@ -255,6 +255,7 @@ defineExpose({ loadData, handleFilterConfirm });
     color:  #4778EC !important
 .nearby-scroll
     overflow: hidden;
+    height: 100%;
     .two-head
         margin: 22rpx;
         display: flex;
@@ -284,14 +285,18 @@ defineExpose({ loadData, handleFilterConfirm });
             border-radius: 12rpx 12rpx 12rpx 12rpx;
 .nearby-list
     border-top: 2rpx solid #EBEBEB;
+    height: calc(100% - 252rpx)
+    background: #f4f4f4
     .one-cards{
         display: flex;
         flex-direction: column;
         padding: 0 20rpx 20rpx 20rpx;
         background: #f4f4f4
+        height: 100%
     }
     .nav-filter
         padding: 16rpx 28rpx 0 28rpx
+        background: #ffffff
         .filter-top
             display: flex
             justify-content: space-between;