uniapp中使用<cover-view>標簽

文章背景:

  • uniapp中遇到了原生組件(canvas)優先級過高覆蓋vant組件

解決辦法:

  • 使用<cover-view>標簽

踩坑:

  • 我想實現的是一個vant組件庫中動作面板的效果,能夠從底部彈出框,讓用戶進行選擇,我直接用了<cover-view>標簽包裹<van-action-sheet>也是不能展示的
  • 在微信開發者工具測試的樣式沒有因為被優先級覆蓋的問題,只有真機上會出現這個問題
  • 微信開發者工具適配的蘋果手機,安卓機的情況下,不能用margin,只能用padding調整樣式

部分代碼:

 <cover-view v-if="isModalVisible" class="bottom-modal"><cover-view class="modal-mask" @click="handleCancel"></cover-view><cover-view class="modal-content"><cover-view class="button-group"><cover-view @click="handleSave">保存到相冊</cover-view><cover-view @click="handleCancel">取消</cover-view></cover-view></cover-view></cover-view>

.bottom-modal {position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.5); /* 背景遮罩 */z-index: 9999; /* 確保彈窗處于最上層 *//* border-radius: 20px; */
}.modal-mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3); /* 半透明的背景 */z-index: 9998; /* 背景遮罩層級 */
}.modal-content {position: absolute;bottom: -15px;left: 0;width: 100%;background: #fff;z-index: 10000; /* 確保內容在彈窗上面 */border-radius: 20px;
}.button-group {padding: 15px 10px 30px 20px;
}.btn {flex: 1;height: 44px;line-height: 44px;text-align: center;border-radius: 8px;font-size: 16px;
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/80202.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/80202.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/80202.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Kafka常見問題及解決方案

Kafka 是一個強大的分布式流處理平臺&#xff0c;廣泛用于高吞吐量的數據流處理&#xff0c;但在實際使用過程中&#xff0c;也會遇到一些常見問題。以下是一些常見的 Kafka 問題及其對應的解決辦法的詳細解答&#xff1a; 消息丟失 一、原因 1.生產端 網絡故障、生產者超時…

leetcode 二分查找應用

34. Find First and Last Position of Element in Sorted Array 代碼&#xff1a; class Solution { public:vector<int> searchRange(vector<int>& nums, int target) {int low lowwer_bound(nums,target);int high upper_bound(nums,target);if(low high…

【Docker】在容器中使用 NVIDIA GPU

解決容器 GPU 設備映射問題&#xff0c;實現 AI 應用加速 &#x1f517; 官方文檔&#xff1a;NVIDIA Container Toolkit GitHub 常見錯誤排查 若在運行測試容器時遇到以下錯誤&#xff1a; docker: Error response from daemon: could not select device driver ""…

通過Quartus II實現Nios II編程

目錄 一、認識Nios II二、使用Quartus II 18.0Lite搭建Nios II硬件部分三、軟件部分四、運行項目 一、認識Nios II Nios II軟核處理器簡介 Nios II是Altera公司推出的一款32位RISC嵌入式處理器&#xff0c;專門設計用于在FPGA上運行。作為軟核處理器&#xff0c;Nios II可以通…

JAVA設計模式——(三)橋接模式

JAVA設計模式——&#xff08;三&#xff09;橋接模式&#xff08;Bridge Pattern&#xff09; 介紹理解實現武器抽象類武器實現類涂裝顏色的行為接口具體顏色的行為實現讓行為影響武器修改武器抽象類修改實現類 測試 適用性 介紹 將抽象和實現解耦&#xff0c;使兩者可以獨立…

k8s 證書相關問題

1.重新生成新證書 kubeadm init phase certs apiserver-etcd-client --config ~/kubeadm.yaml這個命令表示生成 kube-apiserver 連接 etcd 使用的證書,生成后如下 -rw------- 1 root root 1.7K Apr 23 16:35 apiserver-etcd-client.key -rw-r--r-- 1 root root 1.2K Apr 23 …

比較:AWS VPC peering與 AWS Transit Gateway

簡述: VPC 對等連接和 Transit Gateway 用于連接多個 VPC。VPC 對等連接提供全網狀架構,而 Transit Gateway 提供中心輻射型架構。Transit Gateway 提供大規模 VPC 連接,并簡化了 VPC 間通信管理,相比 VPC 對等連接,支持大量 VPC 的 VPC 間通信管理。 VPC 對等連接 AWS V…

制造企業PLM深度應用:2025年基于PDCA循環的7項持續改進指標

制造企業的產品生命周期管理&#xff08;PLM&#xff09;在數字化轉型的浪潮中扮演著至關重要的角色。PLM深度應用不僅能夠提升產品研發效率、保證產品質量&#xff0c;還能增強企業在市場中的競爭力。隨著2025年智能制造目標的推進&#xff0c;基于PDCA循環的持續改進對于PLM的…

極狐GitLab 的壓縮和合并是什么?

極狐GitLab 是 GitLab 在中國的發行版&#xff0c;關于中文參考文檔和資料有&#xff1a; 極狐GitLab 中文文檔極狐GitLab 中文論壇極狐GitLab 官網 壓縮和合并 (BASIC ALL) 在你處理一個特性分支時&#xff0c;通常會創建一些小的、獨立的提交。這些小提交幫助描述構建特性…

解耦舊系統的利器:Java 中的適配器模式(Adapter Pattern)實戰解析

在現代軟件開發中&#xff0c;我們經常需要與舊系統、第三方庫或不一致接口打交道。這時候&#xff0c;如果能優雅地整合這些不兼容組件&#xff0c;又不破壞原有結構&#xff0c;就需要一位“翻譯官” —— 適配器模式。本文將通過 Java 實例&#xff0c;詳細講解適配器模式的…

03-谷粒商城筆記

一個插件的install和生命周期的報錯是不一樣的 Maven找不到ojdbc6和sqljdbc4依賴包 這時候我找到了jar包&#xff0c;然后我就先找到一個jar安裝到了本地倉庫。 在終端上進行命令了&#xff1a; mvn install:install-file -DfileD:\ojdbc6-11.2.0.4.jar -DgroupIdcom.oracle …

黑馬點評redis改 part 5

達人探店 發布探店筆記 那第一張表block表它里邊的結構呢是這個 首先呢第一個字段是i d&#xff0c;就是主鍵&#xff0c;第二個呢是shop id&#xff0c;就是商戶你發的這個比例啊&#xff0c;它是跟哪個商戶有關系的。第三個呢用戶id就是誰發的這篇筆記&#xff0c;第四個呢標…

【PCB工藝】運放電路中的負反饋機制

通過運算方法器電路設計詳細解釋負反饋機制&#xff08;Negative Feedback&#xff09; 負反饋 是控制系統、電子電路、神經系統等多個領域中非常核心的概念。特別在運算放大器&#xff08;Op-Amp&#xff09;電路中&#xff0c;負反饋是實現精確控制和高穩定性的關鍵機制。 …

聲紋振動傳感器在電力監測領域的應用

聲紋振動傳感器在電力監測領域有多種應用&#xff0c;主要包括以下幾個方面&#xff1a; 變壓器監測 故障診斷&#xff1a;變壓器在運行過程中會產生特定的聲紋和振動信號&#xff0c;當變壓器內部出現故障&#xff0c;如繞組短路、鐵芯松動、局部放電等&#xff0c;其聲紋和振…

7、sentinel

控制臺訪問地址&#xff1a;http://localhost:8080/ 依賴 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel</artifactId> </dependency>配置文件 spring:cloud:sentinel:transpo…

線程封裝

目錄 makefile Thread.hpp main.cc 以面向對象的方式造輪子 #ifndef _THREAD_HPP__ // 如果沒有定義過 _THREAD_HPP__ #define _THREAD_HPP__ // 則定義 _THREAD_HPP__// 這里是頭文件的實際內容&#xff08;類、函數聲明等&#xff09;#endif // 結束條件…

【maven-7.1】POM文件中的屬性管理:提升構建靈活性與可維護性

在Maven項目中&#xff0c;POM (Project Object Model) 文件是核心配置文件&#xff0c;而屬性管理則是POM中一個強大但常被低估的特性。良好的屬性管理可以顯著提升項目的可維護性、減少重復配置&#xff0c;并使構建過程更加靈活。本文將深入探討Maven中的屬性管理機制。 1.…

極狐GitLab 的合并請求部件能干什么?

極狐GitLab 是 GitLab 在中國的發行版&#xff0c;關于中文參考文檔和資料有&#xff1a; 極狐GitLab 中文文檔極狐GitLab 中文論壇極狐GitLab 官網 合并請求部件 (BASIC ALL) 合并請求的 概述 頁面顯示了來自服務的狀態更新&#xff0c;這些服務會對您的合并請求執行操作。…

26、C# 中是否可以繼承String類?為什么?

在 C# 中&#xff0c;不能直接繼承 String 類&#xff08;System.String&#xff09;。這是由于以下幾個原因&#xff1a; 1、String 類是 sealed 的 String 類在 .NET 中被標記為 sealed&#xff0c;這意味著它是一個密封類&#xff0c;不能被繼承。 sealed 關鍵字的作用是防…

deeplab語義分割訓練自定數據集

鏈接&#xff1a;https://pan.baidu.com/s/1KkkM1rLfyiMPtYLycpnxmg?pwdj2rd 提取碼&#xff1a;j2rd --來自百度網盤超級會員V2的分享 采用數據集&#xff1a; https://aistudio.baidu.com/datasetdetail/130647 采用代碼&#xff1a; https://github.com/jfzhang95/pyt…