愿随风丶飘雪
愿随风丶飘雪
  • 发布:2023-03-15 19:49
  • 更新:2023-07-12 12:04
  • 阅读:3309

mui的PopPicker和DtPickeri组件在IOS16.2 后选项会偏移的问题

分类:MUI

在苹果更新ios16.2后,很多用户反馈 picker选择不到对应的选项,经查找,发现是和执行的一段动画代码有关,可以修改 mui.picker.all.js 把这段css动画的代码去掉

修改前的mui.picker.all.js 代码

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

修改后的mui.picker.all.js 代码 根据评论区的提示 又加了判断

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";  
}

mui.picker.all.js 修改后 使用 uglifyjs 压缩为 mui.picker.min.js 然后在项目中使用可以解决
1.安装 uglifyjs

npm install uglify-js -g

2.压缩修改后的 mui.picker,all.js

uglifyjs mui.picker.all.js -m -c -o mui.picker.min.js 

附件为修改后的 mui.picker.all.js 和 mui.picker.min.js

4 关注 分享
Huiqi DCloud_iOS_XHY 1***@qq.com ke_huifeng

要回复文章请先登录注册

ke_huifeng

ke_huifeng

回复 ke_huifeng :
这个更判断版本大同小异,因为ios16.2开始支持font-variant-alternates了,而安卓又不支持styleset,所以支持font-variant-alternates: styleset(nice-style)的只有iOS16.2以上的版本(个人推断,有问题不负责)
2023-07-12 12:04
ke_huifeng

ke_huifeng

https://webkit.org/blog/13591/webkit-features-in-safari-16-2/ ios16.2的改动,
@supports (font-variant-alternates: styleset(nice-style)) {
.mui-pciker-list {
transform-origin-z: 0 !important;
}
}在使用组件的页面加上这个样式就行
2023-07-12 11:45
愿随风丶飘雪

愿随风丶飘雪 (作者)

回复 1***@qq.com :
没有时间 还有其他项目 这个项目只能维护
2023-07-10 16:40
1***@qq.com

1***@qq.com

18年uniapp出来 官方这个mui就已经放弃了,官网已经不在维护,用uniapp重新开发吧
2023-07-10 16:26
ke_huifeng

ke_huifeng

回复 ke_huifeng :
不想改源码的可以这样写,16.4的问题也差不多
2023-07-04 18:18
ke_huifeng

ke_huifeng

var picker = new mui.DtPicker(options);
// 时间选择器适配plus.ios16.2以上版本
if (mui.os.ios && mui.os.plus) {
iosMuiPickerAdaptation(plus.os.version);
}

picker.show(function(rs) {
```````````````````````````````````````````````````````````````````````````````````````````````````
// 时间选择器适配plus.ios16.2以上版本
function iosMuiPickerAdaptation(currentVersion) {
if(versionCompare(currentVersion, [16, 2])) {
var pickerList = document.querySelectorAll('.mui-pciker-list');
for (var i = 0; i < pickerList.length; i++) {
pickerList[i].style.webkitTransformOrigin = '0px';
}
}
}

//判断当前版本currentVersion和所需版本requiredVersion哪个大
function versionCompare(currentVersion, requiredVersion) {
var versionArray = currentVersion.split(".");//切割成数组逐个对比
var versionNumbers = versionArray.map(function (numberString) {
return parseInt(numberString, 10);
});
var isVersionValid = true;//true 当前版本号大于等于 所需版本requiredVersion false当前版本号小于所需版本 requiredVersion

for (var i = 0; i < requiredVersion.length; i++) {
var requiredNum = requiredVersion[i];//逐个对比
var versionNum = versionNumbers[i];

if (versionNum < requiredNum) {
isVersionValid = false;
break;
} else if (versionNum > requiredNum) {
break;
}
}

return isVersionValid;
}
2023-07-04 18:15
愿随风丶飘雪

愿随风丶飘雪 (作者)

回复 a***@163.com :
你的帖子在哪呢 16.4的应该有人解决了
2023-05-11 15:19
a***@163.com

a***@163.com

回复 愿随风丶飘雪 :
16.4的问题看一下我发的帖子,大佬
2023-05-11 15:17
愿随风丶飘雪

愿随风丶飘雪 (作者)

回复 9***@qq.com :
我现在老项目有些地方也引入了vant组件库 方便了很多
2023-04-15 10:27
愿随风丶飘雪

愿随风丶飘雪 (作者)

回复 9***@qq.com :
ios 16.4出现什么问题了?
2023-04-15 10:26