uniapp uni-popup使用scroll-view滚动时,底部按钮设置position:fixed失效,部分ios设置有问题

devtools/2025/1/12 2:43:41/

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>

http://www.ppmy.cn/devtools/149758.html

相关文章

景芯SOC设计实战

终身辅导、一对一辅导&#xff0c;手把手教您完成SoC全流程设计&#xff0c;从入门到进阶&#xff0c;带您掌握SoC芯片架构、算法、设计、验证、DFT、后端及低功耗全流程&#xff01;直播视频不定期升级&#xff01;让您快速超越同龄人&#xff01; 景芯团队主打文档服务器实战…

58.在 Vue 3 中使用 OpenLayers 绘制点、线、圆、多边形

前言 在现代 Web 开发中&#xff0c;地图功能已经成为许多应用的重要组成部分。OpenLayers 是一个强大的开源地图库&#xff0c;支持多种地图源和地图操作。结合 Vue 3 的响应式特性&#xff0c;我们可以轻松实现地图的交互功能。本文将详细介绍如何在 Vue 3 中使用 OpenLayer…

010:传统计算机视觉之大津算法初探

本文为合集收录&#xff0c;欢迎查看合集/专栏链接进行全部合集的系统学习。 合集完整版请参考这里。 上一节学习了利用 Canny 算法来完成一个图片的边缘检测&#xff0c;从而可以区分出图像的边缘。 本节再了解一个计算机视觉中更常见的应用&#xff0c;那就是把图片的前景和…

npm-npm install时rollbackFailedOptional: verb npm-session ce210dc17dd264aa报错

1.前言 npm install的时候卡着不动&#xff0c;安装失败。 2.解决 2.1清除代理 npm config rm proxy npm config rm https-proxy #权限问题记得加sudo2.2修改镜像资源为淘宝镜像资源 npm config set registry http://registry.npm.taobao.org2.3查看镜像资源是否切换成功 …

双模充电桩发展前景:解锁新能源汽车未来的金钥匙,市场潜力无限

随着全球能源转型的浪潮席卷而来&#xff0c;新能源汽车行业正以前所未有的速度蓬勃发展&#xff0c;而作为其坚实后盾的充电基础设施&#xff0c;特别是双模充电桩&#xff0c;正逐渐成为推动这一变革的关键力量。本文将从多维度深入剖析双模充电桩的市场现状、显著优势、驱动…

机器学习实战——决策树:从原理到应用的深度解析

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​ ​​​ ​​ 决策树&#xff08;Decision Tree&#xff09;是一种简单而直观的分类与回归模型&#xff0c;在机器学习中广泛应用。它的…

机器学习实战——K-均值聚类算法:原理与应用

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​​​​ ​​​​​​​​​​​​ ​​​​​ 1. K-均值聚类算法的原理解释 ✨ ✨ 1.1 算法概述 K-均值&#xff08;K-Means&#xff…

【硬件测试】基于FPGA的BPSK+帧同步系统开发与硬件片内测试,包含高斯信道,误码统计,可设置SNR

目录 1.硬件片内测试效果 2.算法涉及理论知识概要 2.1 bpsk 2.2 帧同步 3.Verilog核心程序 4.开发板使用说明和如何移植不同的开发板 5.完整算法代码文件获得 1.硬件片内测试效果 本文是之前写的文章 《基于FPGA的BPSK帧同步系统verilog开发,包含testbench,高斯信道,误…