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

news/2025/1/8 5:40:34/

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/news/1561474.html

相关文章

Ungoogled Chromium127 编译指南 MacOS 篇(一)- 项目介绍

1. 引言 在当今互联网时代&#xff0c;浏览器不仅是我们访问网络的窗口&#xff0c;更是保护个人隐私的重要工具。然而&#xff0c;主流浏览器普遍存在数据收集和隐私问题。大多数用户可能并不知道&#xff0c;当我们使用 Chrome 浏览器时&#xff0c;会有大量的个人数据被收集…

云计算是如何帮助企业实现高可用性的

想象一下&#xff0c;你正在享受一个悠闲的周末&#xff0c;突然接到同事的电话&#xff1a;公司的核心系统宕机了&#xff01;这个场景对很多IT从业者来说并不陌生。但在云计算时代&#xff0c;这样的噩梦正在逐渐远去。 一位前辈告诉我&#xff1a;"在技术世界里&#…

怎样用云手机进行海外社媒矩阵引流?

在出海电商领域&#xff0c;借助海外社交媒体平台进行引流已成为一种高效的推广方式。通过精确锁定目标受众&#xff0c;企业能够以较低的投入获得可观的流量&#xff0c;从而提升产品的转化率。而云手机技术的应用&#xff0c;则为这一过程提供了新的工具支持和操作优化。 选择…

oxml中创建CT_Document类

概述 本文基于python-docx源码&#xff0c;详细记录CT_Document类创建的过程&#xff0c;以此来加深对Python中元类、以及CT_Document元素类的认识。 元类简介 元类&#xff08;MetaClass&#xff09;是Python中的高级特性。元类是什么呢&#xff1f;Python是面向对象编程…

关于Mac中的shell

1 MacOS中的shell 介绍&#xff1a; 在 macOS 系统中&#xff0c;Shell 是命令行与系统交互的工具&#xff0c;用于执行命令、运行脚本和管理系统。macOS 提供了多种 Shell&#xff0c;主要包括 bash 和 zsh。在 macOS Catalina&#xff08;10.15&#xff09;之前&#xff0c…

MS7337M集成单通道视频运放与视频同轴线控解码

产品简述 MS7337M 是单通道视频放大器与视频同轴线控解码器为一体的 芯片。视频放大器内部集成 6dB 增益轨到轨输出驱动器以及 6 阶滤波 器&#xff0c; -3dB 带宽达 81MHz 。视频同轴线控解码器内部集成一颗高速处 理器&#xff0c;针对模数混合信号进行有效分离。…

ChromeDriver 版本不匹配问题解决,ChromeDriver最新版本下载安装教程

在 Python 的 Selenium 自动化测试中&#xff0c;ChromeDriver 是一款不可或缺的工具&#xff0c;用于桥接代码与浏览器之间的操作。然而&#xff0c;很多人在运行自动化脚本时都会碰到这样的问题&#xff1a;“session not created: This version of ChromeDriver only suppor…

Alternative to vJoy and FreePIE joystick and input emulators on Linux

这是我之前在个人网站上发布的一篇旧博客文章。我正在将所有内容转移到CSDN。感谢阅读&#xff01; This project is one step forward toward setting up universal mouse steering in racing games on Linux. Some games come with mouse support out of the box, while othe…