uni-app_scroll-view_ios端_组件内部z-index失效处理_uniapp scroll-view层级问题-程序员宅基地

技术标签: 前端-js  前端  ios  uni-app  

uni-app scroll-view ios端 组件内部z-index失效处理

主要原因

<scroll-view> 内部设置了 -webkit-overflow-scrolling: touch 样式,导致z-index失效(safari 3D变换会忽略z-index的层级问题)造成内部组件的弹出框显示遭到遮挡

<template>
  <uni-scroll-view v-on="$listeners">
    <div
      ref="wrap"
      class="uni-scroll-view"
    >
      <div
        ref="main"
        :style="{'overflow-x': scrollX?'auto':'hidden','overflow-y': scrollY?'auto':'hidden'}"
        class="uni-scroll-view"
      >
          ...

<style>
    .uni-scroll-view {
      position: relative;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      /* display: flex; 时在安卓下会导致scrollWidth和offsetWidth一样 */
      height: 100%;
      max-height: inherit;
    }
    ...
</style>
处理方法

在使用弹出框时,采用深度选择器动态改变scroll-view的内部样式,更换成 auto 滚动会有一点卡,不过对弹出框影响不大

<scroll-view :class="showPopup ? 'MyStyle' : ''">
<style scoped>
    .MyStyle >>> .uni-scroll-view {
        -webkit-overflow-scrolling: auto;
    }
</style>
// scss 
<style lang="scss" scoped>
.MyStyle {
    ::v-deep .uni-scroll-view {
        -webkit-overflow-scrolling: auto;
    }
}
</style>
// less
<style lang="less" scoped>
.MyStyle {
    /deep/ .uni-scroll-view {
        -webkit-overflow-scrolling: auto;
    }
}
.MyStyle {
    ::v-deep .uni-scroll-view {
        -webkit-overflow-scrolling: auto;
    }
}
</style>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_37602317/article/details/116699808

智能推荐

touchgfx程序_免费的图形化用户界面工具——TouchGFX-程序员宅基地

文章浏览阅读772次。NEWARRIVALTouchGFX4.12我们免费的图形化用户界面工具——TouchGFX,在其图形引擎和设计工具中,迎来了重大的升级。TouchGFX4.12带来了:可缓存容器,支持局部缓存,和L8图形压缩格式,这些都将会给STM32微控制性能带来更高的提升。当嵌入式系统继续深入主流市场,加上目前的显示屏和高效的图形用户界面都将大大的提升用户体验。这解释了为什么很多报告都显示越来越多的嵌入式系..._touchgfx怎么收费

ThinkPad T430i,如何将WIN8换成WIN7???-程序员宅基地

文章浏览阅读74次。1. 启动时不断点击键盘上的F1键,进入BIOS 界面选择“Restart”→把 “OS Optimized Default”设置为 “disabled” ,(OS Optimized Default 开关可以理解为UEFI和传统BIOS的切换);提示警告选择“Yes”,按回车键Enter确认2。设置“UEFI/Legacy Boot”为“Legacy Only”,需要首先设置Secure Boo..._t430i换装win7

高可用Kubernetes集群-12. 部署kubernetes-ingress_kubernetes部署ingress-程序员宅基地

文章浏览阅读1.5k次。参考文档:Github:https://github.com/kubernetes/ingress-nginx Kubernetes ingress:https://kubernetes.io/docs/concepts/services-networking/ingress/ Ingress:https://mritd.me/2017/03/04/how-to-use-nginx-ing..._kubernetes部署ingress

用U盘装Centos_minimal.iso时,出现error 15: file not found_centos安装 error15-程序员宅基地

文章浏览阅读1.4k次。出现了错误:error 15: file not found 的提示。解决方法:输入c回车进入grub,然后输入 quit 回车,然后就进入了正常的安装界面。试过这个不行之后,再考虑网上的方法。(_centos安装 error15

渗透测试网站信息安全该如何学习-程序员宅基地

文章浏览阅读208次。【推荐阅读】微服务还能火多久?>>> 实际上这个问题..._渗透测试 结束语为最后再次欢迎各位大牛的到来

金蝶显示未登录服务器,KIS安全锁离线登录问题-程序员宅基地

文章浏览阅读3.1k次。关于金蝶KIS安全锁离线登录问题绑定KIS 安全锁后,金蝶KIS标准版V11.0 如何离线登录?解决方案:(1)联网状态下登录金蝶KIS标准版V11.0 的加密服务器,单击【操作】-【系统设置】,勾选“记住连网登录密码”;(2)离线状态下,在服务器端先插入金蝶KIS安全锁,双击金蝶KIS加密服务器会自动登录;(3)离线登录后,KIS 加密服务器会显示加密信息,但云账号为未登录状态。绑定KIS 安全..._金蝶专业版显示离线状态

随便推点

matlab 张量工具箱,张量的matlab工具箱 matlab软件的张量工具包 - 下载 - 搜珍网-程序员宅基地

文章浏览阅读379次。压缩包 : tensor_toolbox_2.6.zip 列表tensor_toolbox_2.6/tensor_toolbox_2.6/@ktensor/tensor_toolbox_2.6/@ktensor/arrange.mtensor_toolbox_2.6/@ktensor/datadisp.mtensor_toolbox_2.6/@ktensor/disp.mtensor_toolbo..._matlab中的tensor工具包下载

c++模板参数自动推导_c++默认模板参数自动推导-程序员宅基地

文章浏览阅读6.5k次,点赞2次,收藏8次。上次,我们看了什么是模板函数,今天,我们就从这个模板函数入手,继而引出一个新的知识点-模板参数自动推导。为了介绍清楚什么是模板参数自动推导,我们先定义几个术语,通过这些术语来描述比较方便,这些术语是:模板形参,模板实参,模板函数形参,模板函数实参。 为了表达明确,我们先来看一下图1,图1中指出了什么是模板参数,模板实参,模板函数形参,模板函数实参。图1 术语 就像图1所示,templat_c++默认模板参数自动推导

运行jar文件-程序员宅基地

文章浏览阅读90次。在将class文件组织成JAR包的时候,如果需要的是一个可执行的包,就要指定那个类是主类。指定的方法是指定一个清单文件。最简单的清单文件如下:Manifest-Version: 1.0Main-Class: MainClassNameCreated-By: authorName将Main-Class替换成你的主类的名字即可。注意每个冒号后面都一个空格。然后保存为mani..._运行jar文件 找不到或无法加载主类 123.jar

用 Thinstation 构建桌面云瘦客户端-程序员宅基地

文章浏览阅读1.5k次。桌面虚拟化是当今虚拟化技术的热点领域,桌面云计算也成为了目前云计算领域炙手可热的话题。桌面云计算通过把计算能力转移到服务器端,同时以虚拟桌面的形式替代个人电脑,大大降低了企业成本。在桌面云的世界里,用户使用的客户端也不同于传统意义上的客户端。瘦客户端(Thin Client),是一种普遍采用的客户端模式,它不仅可以很好的适应桌面云的计算环境,更为重要的是,它可以进一步节约企业成本,提升桌面云计算解..._thinstation-6.2-stable.tar

linux启动mysql_linux启动mysql一至延迟-程序员宅基地

文章浏览阅读141次。启动1、使用 service 启动:service mysql start2、使用 mysqld 脚本启动:/etc/inint.d/mysql start3、使用 safe_mysqld 启动:safe_mysql&停止1、使用 service 启动:service mysql stop2、使用 mysqld 脚本启动:/etc/inint.d/mysql stop3、..._linux启动mysql一至延迟

Java: 日期相关的类 XMLGregorianCalendar 和 GregorianCalendar_用gregoriancalendar创建日历时,为啥月份那里要减一-程序员宅基地

文章浏览阅读624次。转:http://blog.csdn.net/qianlizhima1/article/details/16904695 版权声明:本文为博主原创文章,未经博主允许不得转载。在 Web 开发中经常需要操纵 Web Service 的响应的信息,其中可能包含日期信息。如果开发是基于 Java 的,通常可以通过返回 XMLGregorianCalendar 类的一个对象来表示一个时间,_用gregoriancalendar创建日历时,为啥月份那里要减一

推荐文章

热门文章

相关标签