mui picker无法滑动和选项遮挡问题修复

智能制造掘金者

已于 2023-07-05 14:04:40 修改

阅读量517

点赞数

分类专栏： mui picker 问题修复文章标签：前端

于 2023-05-19 15:08:24 首次发布

本文链接：https://blog.csdn.net/zgp11zgp/article/details/130767118

版权

mui picker 问题修复专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.无法滑动
mui.picker.js
更改前

if (isIos) {  
    self.list.style.webkitTransformOrigin = "center center " + self.r + "px";  
}

更改后

if (isIos) {  
    if (mui.os.ios && mui.os.plus && plus.os.version >= "16.2") {  
        return;  
    }  
    var maches = userAgent.match(/iphone os ([\d_]+) /i);  
    if (maches && maches.length >= 2 && maches[1] >= "16_2"){  
        return;  
    }  
    self.list.style.webkitTransformOrigin = "center center " + self.r + "px";  
}

2.选项遮挡
mui.picker.css
更改前

.mui-picker-inner {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
    -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
}

更改后

.mui-picker-inner {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
   /*  注释IOS遮挡
   -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
    -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);*/
}