购物车模块猜你喜欢与安全区域

src/pages/cart/cart2.vue

@@ -3,7 +3,8 @@ import CartMain from './components/CartMain.vue'
 </script>
 
 <template>
-  <CartMain />
+  <!-- 适配底部安全区 -->
+  <CartMain safe-area-inset-bottom />
 </template>
 
 <style lang="scss">

src/pages/cart/components/CartMain.vue

@@ -1,5 +1,5 @@
 <template>
-  <scroll-view scroll-y class="scroll-view">
+  <scroll-view scroll-y class="scroll-view" @scrolltolower="onScrolltolower">
     <!-- 已登录: 显示购物车 -->
     <template v-if="memberStore.profile">
       <!-- 购物车列表 -->
@@ -62,7 +62,10 @@
         </navigator>
       </view>
       <!-- 吸底工具栏 -->
-      <view class="toolbar">
+      <view
+        class="toolbar"
+        :style="{ paddingBottom: safeAreaInsetBottom ? safeAreaInsets?.bottom + 'px' : 0 }"
+      >
         <text @tap="onChangeSelectedAll" class="all" :class="{ checked: isSelectedAll }">全选</text>
         <text class="text">合计:</text>
         <text class="amount">{{ selectedCartListMoney }}</text>
@@ -103,6 +106,7 @@ import { useMemberStore } from '@/stores'
 import type { CartItem } from '@/types/cart'
 import { onShow } from '@dcloudio/uni-app'
 import { computed, ref } from 'vue'
+import { useGuessList } from '@/composables'
 
 // 获取会员Store
 const memberStore = useMemberStore()
@@ -196,6 +200,17 @@ const gotoPayment = () => {
   // 跳转到结算页
   uni.navigateTo({ url: '/pagesOrder/create/create' })
 }
+
+// 猜你喜欢
+const { guessRef, onScrolltolower } = useGuessList()
+
+// 是否适配底部安全区域
+defineProps<{
+  safeAreaInsetBottom?: boolean
+}>()
+
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
 </script>
 
 <style lang="scss">