app真机运行时swiper样式存在bug

cumt-robin commented 2 years ago

问题描述 .uni-swiper-slides 这个元素在真机上没有高度

先看内置 h5 的效果

再Webview调试控制台打开真机inspect

复现步骤 内置h5浏览器没有问题，一到真机就样式异常。

预期结果 样式与 h5 一致，表现正常

实际结果 不一致

系统信息:

发行平台: 5+ App
操作系统 Android11
HBuilderX版本 3.3.1.20211214-alpha
uni-app版本 3.3.1
设备信息 oneplus 9R

cumt-robin commented 2 years ago

如果有办法改写样式也行，但是我这样试了在基座上有效果，打包后就没有用。

// uni-app 3.3.1 bug
swiper {
    .uni-swiper-slides {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
}

社区之前有类似问题，说改为 wx 前缀，也没有用。

cumt-robin commented 2 years ago

@fxy060608 求大佬看一眼，这问题卡两天了

fxy060608 commented 2 years ago

@StrivingRabbit

cumt-robin commented 2 years ago

不用 alpha 版本吧，https://github.com/dcloudio/uni-app/issues/2970 这个问题又存在，canvasToTempFilePath 不能正常使用。用 alpha 版本吧，swiper 又没法用了，真难。

StrivingRabbit commented 2 years ago

@cumt-robin 是 vue3 ？H5 正常，但是 app 真机有问题是吗？

cumt-robin commented 2 years ago

@cumt-robin 是 vue3 ？H5 正常，但是 app 真机有问题是吗？

是的，真机.uni-swiper-slides的高度为0，因为我检查到它的样式是这样的。

.uni-swiper-slides {
  position: absolute;
  inset: 0;
}

我也不知道这个 inset 是什么，但是在内置 h5，应该是 top:0;left:0;bottom:0;right:0

我尝试加样式修改 .uni-swiper-slides，但是也只是在基座有效果，一打包还是没有效果。所以不知道怎么办了。

StrivingRabbit commented 2 years ago

@cumt-robin 你是只写了一个 swiper，内部没有写 swiper-item？是想实现一个什么样的效果？

cumt-robin commented 2 years ago

@StrivingRabbit 写了，基本的用法是没有问题的。

<!-- 升级 3.3.1 版本后有问题，待分析 -->
<swiper class="swiper">
  <swiper-item>
    <image class="banner-img" mode="aspectFill" src="@/assets/img/banner_default.png"></image>
  </swiper-item>
</swiper>

上面是我一个页面写的，其实只是展示一张图片（我这里也可以不用swiper），但是我还有一个日历组件也用了 swiper，高度为0，就看不到东西了，这个是重点。

StrivingRabbit commented 2 years ago

@cumt-robin 使用的什么浏览器打开的，版本是多少？手机 webview 版本是多少？

cumt-robin commented 2 years ago

@StrivingRabbit 浏览器是用的HBuilderX自带的，没有问题。发行平台: 5+ App 操作系统 Android11 HBuilderX版本 3.3.1.20211214-alpha uni-app版本 3.3.1 设备信息 oneplus 9R Android WebView: 83.0.4103.106

StrivingRabbit commented 2 years ago

这个属性需要webview 87才支持，就是 top/left/bottom/right 的集合，内部讨论下怎么处理

cumt-robin commented 2 years ago

这个属性需要webview 87才支持，就是 top/left/bottom/right 的集合，内部讨论下怎么处理

我用 HbuilderX 3.2.16 在同样的手机表现是正常的。请问 3.3.1是改写了 swiper 这块的样式吗

StrivingRabbit commented 2 years ago

@cumt-robin 可能和打包配置有关，排查一下

cumt-robin commented 2 years ago

@StrivingRabbit 配置文件没改，对了，top:0;left:0;bottom:0;right:0 不是我加的样式，是检查到的 .uni-swiper-slides 的内置样式。我没有针对 swiper 做任何样式修改。

打包这块，还是用的云打包，和之前一样，唯一更换的就是 HBuilderX 的版本。

StrivingRabbit commented 2 years ago

@cumt-robin 我的意思是 uni-app框架打包或者依赖版本的变更导致了这个问题，和你项目没有关系

cumt-robin commented 2 years ago

@cumt-robin 我的意思是 uni-app框架打包或者依赖版本的变更导致了这个问题，和你项目没有关系

所以，我是要等新的版本吗？我项目里也没什么可改的配置了，emm

StrivingRabbit commented 2 years ago

你可以把我上传的这个附件替换至 HX安装目录\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-app-plus\dist。运行看下效果。

style.zip

StrivingRabbit commented 2 years ago

@cumt-robin

cumt-robin commented 2 years ago

你可以把我上传的这个附件替换至 HX安装目录\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-app-plus\dist。运行看下效果。

style.zip

除了牛逼我还能说什么，谢了大佬！

fxy060608 commented 2 years ago

最新HBuilderX Alpha已修复

dcloudio / uni-app

app真机运行时swiper样式存在bug #3073