uniapp uni-popup使用scroll-view滚动时,底部按钮设置position:fixed失效,部分ios设置有问题
尝试过多种办法,最后发现部分机型position:fixed
失效,position: sticky
可以用,但是只设置sticky
的话,部分机型又会有问题,无法在最底部,所以想到了嵌套的方法。
FilterPopup.vue
弹框组件
<template><!--设置page-meta,弹框打开时禁止滚动页面--><page-meta :page-style="'overflow:'+(isShow?'hidden':'visible')"></page-meta><!-- 筛选 --><uni-popup ref="popupFilter" type="right" background-color="#fff" @change="popupChange"><scroll-view scroll-y="true" class="popup-content"><view class="main-cont"><slot/></view><view class="bottom-fixed-bg-cont-filter"></view><!--给按钮的view再包一层view,设置sticky--><view class="position-sticky" :class="tabBarFilter?'tabbar-btn':''"><view class="bottom-fixed-btn-cont"><button size="large" class="button" @click="handle('reset')">重置</button><button size="large" class="button button-confirm" type="info" @click="handle('submit')">确认</button></view></view></scroll-view></uni-popup>
</template>
<script setup>
import {ref} from 'vue'const props = defineProps({// 如果是带有tabBar页面的筛选项,tabBarFilter传true,查询重置按钮需要根据入参重设高度tabBarFilter: {type: Boolean || undefined,default: ''},customClose: { // 自行处理关闭type: Boolean,default: false}
})
const isShow = ref(false)
const emits = defineEmits(['submit', 'reset'])
const handle = (type) => {emits(type)if (props.customClose && type === 'submit') return;close()
}
const popupFilter = ref(null)function open() {popupFilter.value.open()
}function close() {popupFilter.value.close()
}const popupChange = (e) => {isShow.value = e.show
}defineExpose({open,close
})
</script>
<style scoped lang="scss">
.popup-content {width: 600rpx;height: 100vh;box-sizing: border-box;.main-cont {padding: 16rpx 54rpx 0 54rpx;box-sizing: border-box;}
}.bottom-fixed-bg-cont-filter {// #ifdef H5height: 260rpx;// #endif// #ifndef H5height: 180rpx;// #endifpadding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
}.position-sticky {position: sticky;
}
.bottom-fixed-btn-cont {position: fixed;bottom: 0;left: 0;right: 0;height: 160rpx;display: flex;justify-content: space-between;align-items: center;background-color: #ffffff;padding: 10rpx 20rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);box-shadow: rgba(0, 0, 0, 0.08) 0 0 3px 1px;
}</style>