增加底部安全距离

components/My_listbox/My_listbox.vue

@@ -12,6 +12,7 @@
                 <up-empty :mode="mode" />
             </view>
             <view id="bottom" />
+            <view v-if="safety" class="safety" />
         </scroll-view>
     </div>
 </template>
@@ -22,6 +23,10 @@ import { ref, onMounted, nextTick, getCurrentInstance } from 'vue'
 const props = defineProps({
     getlist: Function,
     empty: Boolean,
+    safety: {
+        type: Boolean,
+        default: true
+    },
     mode: {
         type: String,
         default: "data"
@@ -48,18 +53,12 @@ const instance = getCurrentInstance()
 
 /* 下拉刷新 */
 const pullToRefresh = () => {
-    try {
-        inRefresh.value = true
-        if (getlist) emit("getlist", true)
-    } catch (error) {
-        setTimeout(() => {
-            inRefresh.value = false
-        }, 500)
-    }
+    inRefresh.value = true
+    emit("getlist", true)
 }
 
 /* 刷新完成 */
-const RefreshToComplete = () => {
+const refreshToComplete = () => {
     setTimeout(() => {
         inRefresh.value = false
     }, 500)
@@ -133,24 +132,29 @@ const setHeight = (mode, num) => {
         })
     })
 }
-
 // 初始化高度
 onMounted(() => {
     // 添加延迟确保元素已渲染
     setTimeout(() => {
-        getHeight("#mylisttop", true).then(res => {
-            height.value = res
-        }).catch(err => {
-            console.error("初始化高度失败:", err)
-            // 设置默认高度
-            height.value = window.innerHeight - 100
-        })
+        setHeight()
     }, 100)
 })
+
+// 使用 defineExpose 暴露方法给父组件
+defineExpose({
+    refreshToComplete,
+    setHeight
+})
 </script>
 
 <style lang="scss" scoped>
 .scroll-view {
     position: relative;
 }
+
+.safety {
+    height: constant(safe-area-inset-bottom);
+    height: env(safe-area-inset-bottom);
+    width: 100%;
+}
 </style>