苗木网站模板,网站建设 面试题,如何制作一个php网站源码,马鞍山网站开发最近在维护一个H5老项目时#xff0c;遇到一个问题#xff0c;就是在ios上z-index不起作用#xff0c;在安卓上样式都是好的。 项目的架构组成是vue2.x vux vuex vue-router等 用的UI组件库是vux 在页面中有一个功能点#xff0c;就是点选择公司列表的时候#xff0c;会…最近在维护一个H5老项目时遇到一个问题就是在ios上z-index不起作用在安卓上样式都是好的。 项目的架构组成是vue2.x vux vuex vue-router等 用的UI组件库是vux 在页面中有一个功能点就是点选择公司列表的时候会出现这个页面上面浮现一个a弹框页面这个a弹框页面里面有搜索框可以输入公司名进行搜索然后出现公司列表点击其中的一个公司就算进行选择了。 主要是基于vux这个UI组件库的特性造成了这个问题基础代码如下
templatediv classselect-alldiv classcompanyListpopup/popup/div/div
/templatescript
import { Popup } from vux;
export default {components: {Popup,},
};
/script打包之后在页面上运行之后会发现在页面中的页面布局如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title页面/title
/head
bodydiv classselect-alldiv classcompanyListdiv.../div!-- 显示的列表页 --divdiv classvux-popup-content vux-popup-content-showdiv公司列表/div/div/div/div/div!-- 蒙层 --div classvux-popup-mask vux-popup-mask-show/div
/body
/html会发现蒙层在body元素中而显示的弹窗列表在另外的很深的html中不在一个层级中。
这个z-index样式是vux组件库默认设置的
.vux-popup-mask{z-index:500;
}于是我给vux-popup-content这个类名设置的是
.vux-popup-content{z-index:501;
}然后在安卓中是有效果的在ios中无效。
首先在html中vux-popup-mask和vux-popup-content不在一个层级中不知道是不是因为这个原因。那我怎么解决的呢 我参考了这这两种做法
方法1transform
div {z-index: 2;transform: translateZ(2px)
}方法2teleport
// vue
teleport tobodydiv/div
/teleport// 使用vant允许指定dom的组件van-popup teleportbody/van-popup我借鉴了第二种方法 加了v-transfer-dom属性 代码如下
templatediv classselect-alldiv classcompanyList v-transfer-dompopup/popup/div/div
/templatescript
import { Popup, TransferDom } from vux;
export default {directives:{TransferDom},components: {Popup,},
};
/script通过v-transfer-dom可以把内容元素vux-popup-content移动到紧挨着body元素下面这样就可以和vux-popup-mask处于一个层级里面
我们可以看一下打包运行后的代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title页面/title
/head
bodydiv classselect-alldiv.../div/div!-- 弹窗内容区 --div classv-transfer-dom companyListdiv.../div!-- 显示的列表页 --divdiv classvux-popup-content vux-popup-content-showdiv公司列表/div/div/div/div!-- 蒙层 --div classvux-popup-mask vux-popup-mask-show/div
/body
/html可以看到元素已经移到了外面所以这个时候设置的z-index: 501 就生效了。
