safeTop

src/components/AppBar.vue

@@ -8,7 +8,7 @@
         v-if="show"
         z-index="20"
         placeholder
-        safe-area-inset-top
+        id="navBar"
         :border="false"
         :class="{ dark: tabColor }"
     >

src/mixins/common.js

@@ -1,4 +1,5 @@
 import http from '../plugins/http';
+import { useCssVar } from '@vueuse/core';
 export default {
     computed: {
         isLogin() {
@@ -8,6 +9,9 @@ export default {
             let status = this.$store.state.userInfo?.authStatus;
 
             return this.AuthStatus.has(status) ? this.AuthStatus.get(status) : '未认证';
+        },
+        safeTop() {
+            return getComputedStyle(document.documentElement).getPropertyValue('--sat').replaceAll(' ', '');
         }
     },
     data() {

src/styles/app.less

@@ -47,6 +47,10 @@
     --van-button-border-radius: 8px;
     --van-popover-action-font-size: 14px;
     --van-cell-font-size: 12px;
+    --sat: env(safe-area-inset-top);
+    --sar: env(safe-area-inset-right);
+    --sab: env(safe-area-inset-bottom);
+    --sal: env(safe-area-inset-left);
 }
 
 [contenteditable='true'],

src/views/Discover.vue

@@ -9,105 +9,106 @@
         v-model="isLoading"
         @refresh="onRefresh"
     > -->
-    <van-sticky :offset-top="0">
-        <div class="padding-safe-top">
-            <div class="search_con">
-                <div class="search" @click="$router.push('/productSearch')">
-                    <img src="@assets/search-con@3x.png" alt="" class="search_img" />
-                    <span class="search_text">搜索你想要的</span>
+    <div ref="container">
+        <van-sticky :offset-top="0">
+            <div class="padding-safe-top">
+                <div class="search_con">
+                    <div class="search" @click="$router.push('/productSearch')">
+                        <img src="@assets/search-con@3x.png" alt="" class="search_img" />
+                        <span class="search_text">搜索你想要的</span>
+                    </div>
                 </div>
             </div>
-        </div>
-    </van-sticky>
-    <!-- 商品展示 -->
-    <div class="commodity_display">
-        <swiper
-            v-if="commodityDisplayList.length > 0"
-            :slides-offset-after="0"
-            slides-per-view="auto"
-            centeredSlidesBounds
-            @touchEnd="touchEndEvent"
-            @slideChange="slideChangeEvent"
-        >
-            <swiper-slide
-                class="setting"
-                v-for="item in commodityDisplayList"
-                :key="item.id"
-                style="width: 88px"
-                @click="$router.push({ path: '/creatorDetail', query: { id: item.id } })"
+        </van-sticky>
+        <!-- 商品展示 -->
+        <div class="commodity_display">
+            <swiper
+                v-if="commodityDisplayList.length > 0"
+                :slides-offset-after="0"
+                slides-per-view="auto"
+                centeredSlidesBounds
+                @touchEnd="touchEndEvent"
+                @slideChange="slideChangeEvent"
             >
-                <van-image width="66px" height="66px" radius="33" :src="getImg(item.avatar)" fit="cover" />
-                <div class="setting_title">{{ item.nickname }}</div>
-            </swiper-slide>
+                <swiper-slide
+                    class="setting"
+                    v-for="item in commodityDisplayList"
+                    :key="item.id"
+                    style="width: 88px"
+                    @click="$router.push({ path: '/creatorDetail', query: { id: item.id } })"
+                >
+                    <van-image width="66px" height="66px" radius="33" :src="getImg(item.avatar)" fit="cover" />
+                    <div class="setting_title">{{ item.nickname }}</div>
+                </swiper-slide>
 
-            <swiper-slide
-                class="slide-sek"
-                :style="{ width: `calc(100vw - ${commodityDisplayList.length * 84}px)` }"
-            ></swiper-slide>
+                <swiper-slide
+                    class="slide-sek"
+                    :style="{ width: `calc(100vw - ${commodityDisplayList.length * 84}px)` }"
+                ></swiper-slide>
 
-            <swiper-slide class="slide-more" @click="$router.push('/creatorList')">
-                <img src="@assets/slide-left.png" alt="" />
-                <span>查</span>
-                <span>看</span>
-                <span>更</span>
-                <span>多</span>
-            </swiper-slide>
-        </swiper>
-        <!-- <div class="commodity_display_tip">
+                <swiper-slide class="slide-more" @click="$router.push('/creatorList')">
+                    <img src="@assets/slide-left.png" alt="" />
+                    <span>查</span>
+                    <span>看</span>
+                    <span>更</span>
+                    <span>多</span>
+                </swiper-slide>
+            </swiper>
+            <!-- <div class="commodity_display_tip">
             <img :src="require('@assets/gengduo-con@3x.png')" alt="" class="commodity_display_tip_img"/>
             <div>左 滑 更 多</div>
         </div> -->
-    </div>
-    <van-sticky :offset-top="67">
-        <van-tabs
-            v-model:active="sort"
-            :ellipsis="false"
-            line-width="16"
-            line-height="2"
-            @click-tab="changeTab"
-            @change="changeSort"
-            :class="{ trans: source == 'TRANSFER' }"
-        >
-            <van-tab
-                :title="item.label"
-                :name="item.value"
-                :title-class="item.type === 'select' && sortDes ? sortDes : ''"
-                :key="index"
-                :lazy-render="false"
-                v-for="(item, index) in selectOptions"
+        </div>
+        <van-sticky :container="container" offset-top="67">
+            <van-tabs
+                v-model:active="sort"
+                :ellipsis="false"
+                line-width="16"
+                line-height="2"
+                @click-tab="changeTab"
+                @change="changeSort"
+                :class="{ trans: source == 'TRANSFER' }"
             >
-                <!-- <template v-if="item.type === 'sales'" #title>
+                <van-tab
+                    :title="item.label"
+                    :name="item.value"
+                    :title-class="item.type === 'select' && sortDes ? sortDes : ''"
+                    :key="index"
+                    :lazy-render="false"
+                    v-for="(item, index) in selectOptions"
+                >
+                    <!-- <template v-if="item.type === 'sales'" #title>
                         <div class="tab">
                             <span>{{ item.label }}</span>
                             <van-icon size="8" name="arrow-up" />
                             <van-icon size="8" name="arrow-down" />
                         </div>
                     </template> -->
-                <template v-if="item.type === 'select'" #title>
-                    <div class="tab">
-                        <span>{{ item.label }}</span>
-                        <van-icon size="8" name="arrow-up" />
-                        <van-icon size="8" name="arrow-down" />
-                    </div>
-                </template>
-                <!-- <template v-if="item.type === 'views'" #title2>
+                    <template v-if="item.type === 'select'" #title>
+                        <div class="tab">
+                            <span>{{ item.label }}</span>
+                            <van-icon size="8" name="arrow-up" />
+                            <van-icon size="8" name="arrow-down" />
+                        </div>
+                    </template>
+                    <!-- <template v-if="item.type === 'views'" #title2>
                         <div class="tab">
                             <span>{{ item.label }}</span>
                             <van-icon size="8" name="arrow-up" />
                             <van-icon size="8" name="arrow-down" />
                         </div>
                     </template> -->
-            </van-tab>
-        </van-tabs>
-    </van-sticky>
-    <!-- <van-swipe :loop="false" :width="94" :height="90" :show-indicators="false">
+                </van-tab>
+            </van-tabs>
+        </van-sticky>
+        <!-- <van-swipe :loop="false" :width="94" :height="90" :show-indicators="false">
                 <van-swipe-item v-for="(item, index) in commodityDisplayList" :key="index">
                     <van-image width="94px" height="90px" :src="getImg(item.pic)" fit="cover" />
                 </van-swipe-item>
             </van-swipe> -->
-    <div class="explore_content">
-        <!-- banner图展示 -->
-        <!-- <div class="banner">
+        <div class="explore_content">
+            <!-- banner图展示 -->
+            <!-- <div class="banner">
                 <div class="banner_con" v-for="(item, index) in bannerList" :key="index" @click="showJump(index)">
                     <img :src="item.img" alt="" class="banner_con_img" />
                     <div class="banner_con_title">
@@ -116,28 +117,28 @@
                     </div>
                 </div>
             </div> -->
-        <div class="content_list">
-            <!-- 本期推荐 -->
-            <!-- <page-title
+            <div class="content_list">
+                <!-- 本期推荐 -->
+                <!-- <page-title
                     title="本期推荐"
                     :to="{ path: '/productList', query: { type: 'DEFAULT', title: '本期推荐' } }"
                 >
                 </page-title> -->
-            <van-list
-                v-model:loading="loading"
-                :finished="finished"
-                @load="getData"
-                :finished-text="empty ? '' : '- 更多藏品敬请期待 -'"
-            >
-                <div class="current_recommendation">
-                    <template v-for="(item, index) in list" :key="item.id">
-                        <CollectionList v-model:info="list[index]"></CollectionList
-                    ></template>
-                </div>
-            </van-list>
-            <!-- <List :dataList="currentRecommendationList"></List> -->
-            <!-- 最HOT收藏品 -->
-            <!-- <page-title
+                <van-list
+                    v-model:loading="loading"
+                    :finished="finished"
+                    @load="getData"
+                    :finished-text="empty ? '' : '- 更多藏品敬请期待 -'"
+                >
+                    <div class="current_recommendation">
+                        <template v-for="(item, index) in list" :key="item.id">
+                            <CollectionList v-model:info="list[index]"></CollectionList
+                        ></template>
+                    </div>
+                </van-list>
+                <!-- <List :dataList="currentRecommendationList"></List> -->
+                <!-- 最HOT收藏品 -->
+                <!-- <page-title
                     title="最HOT收藏品"
                     :to="{ path: '/productList', query: { type: 'DEFAULT', title: '最HOT收藏品' } }"
                 >
@@ -147,6 +148,7 @@
                         <CollectionList v-model:info="hotCollectionList[index]"></CollectionList
                     ></template>
                 </div> -->
+            </div>
         </div>
     </div>
     <!-- </van-pull-refresh> -->
@@ -173,6 +175,7 @@ import product from '../mixins/product';
 import CollectionList from '../components/CollectionList.vue';
 import banner from '../mixins/banner';
 import list from '../mixins/list';
+import { ref } from 'vue';
 // import TopNavigation from "../components/TopNavigation.vue"
 export default {
     name: 'discover',
@@ -183,6 +186,10 @@ export default {
         Swiper,
         SwiperSlide
     },
+    setup() {
+        const container = ref(null);
+        return { container };
+    },
     inject: ['setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll'],
     // components: {
     //     Swiper,