在vue中使用iview的Select组件,当我在移动端苹果手机上使用时,拖动滑动页面,会导致Select组件位置错乱,体验非常差,这里记录下解决办法。
我们先看一下错乱图:
上图可以明显看到,Select的定位已经完全偏离父级,在安卓手机上也有同样的错误。
iview可能并不适合做响应式网页,但是问题出来了,就得解决,上述问题在pc端并未展示出来。
我们可以查看源码看下Select布局
上图蓝色部分,可以看到Select组件增加了行内样式fixed, 当我们在手机端滑动时,组件会实时计算高度,并重新赋值top属性,由于此处头部导航是用的fixed定位,所以就相当于fixed里面包裹了fixed。
根据官方文档介绍,可以加 transfer=“true” 属性处理此问题,但在手机端并不可靠,尤其是苹果手机。
接下来我们通过js重新添加class解决此问题。
如下图,我们在select组件上添加点击事件:
在methods中使用:
selectClick() {
//设备选择下拉框,当是苹果端是会出现位置错乱,此处做处理
//非移动端不做处理
if (!/(iPhone|Android)/i.test(navigator.userAgent)) return;
this.$nextTick(() => {
//苹果系统使用absolute
let select = document.querySelector(".ivu-select-dropdown");
if (!/Android (\d+\.\d+)/.test(window.navigator.userAgent)) {
select.classList.add("pos-absolute");
}
});
}
处理办法是当点击select组件是动态添加一个position:absolute;属性的类,类的名字叫 : pos-absolute
以上代码即在移动端的实践。
同样 iview的Poptip组件也有同样的问题,关键在于当在手机上滑动时,组件会实时计算并赋值top属性的值。苹果手机尽量少用fixed定位,由于此项目存在年限较久暂时只能通过此方法临时解决。
笔者此处用的为iview2版本。