原生Preview组件除iphone5之外,其他的和真机测试上出现两种不同的效果
发布于 5 年前 作者 liuping 8789 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

以前,用微信原生的组件Preview的时候,预览和手机预览各方面是没问题的。代码基本上是从微信的组件库复制粘贴过来的,wxss也是用weui.wx.ss的。

下面的截图的页面,是从官方下载下来的代码预览的。

工具预览iPhone5正常显示,没毛病,ios客户端和安卓的客户端的效果和开发者工具的iPhone5是一致的,都没毛病,如上图。

从开发者工具预览iPhone6开始,表单的左边的标题字体变大了,右边的内容也开始飘了。(如上图,就放两张,除iPhone5预览的,其他都和这个是一样的。)

  • 预期表现
  • 复现路径
  • 提供一个最简复现 Demo

原官方wxml

<view class=“page”>

<view class=“page__hd”>

<view class=“page__title”>Preview</view>

<view class=“page__desc”>表单预览</view>

</view>

<view class=“page__bd”>

<view class=“weui-form-preview”>

<view class=“weui-form-preview__hd”>

<view class=“weui-form-preview__item”>

<view class=“weui-form-preview__label”>付款金额</view>

<view class=“weui-form-preview__value_in-hd”>¥2400.00</view>

</view>

</view>

<view class=“weui-form-preview__bd”>

<view class=“weui-form-preview__item”>

<view class=“weui-form-preview__label”>商品</view>

<view class=“weui-form-preview__value”>电动打蛋机</view>

</view>

<view class=“weui-form-preview__item”>

<view class=“weui-form-preview__label”>标题标题</view>

<view class=“weui-form-preview__value”>名字名字名字</view>

</view>

<view class=“weui-form-preview__item”>

<view class=“weui-form-preview__label”>标题标题</view>

<view class=“weui-form-preview__value”>很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</view>

</view>

</view>

<view class=“weui-form-preview__ft”>

<navigator url="" class=“weui-form-preview__btn weui-form-preview__btn_primary” hover-class=“weui-form-preview__btn_active”>操作</navigator>

</view>

</view>

<view class=“weui-form-preview”>

<view class=“weui-form-preview__hd”>

<view class=“weui-form-preview__label”>付款金额</view>

<view class=“weui-form-preview__value_in-hd”>¥2400.00</view>

</view>

<view class=“weui-form-preview__bd”>

<view class=“weui-form-preview__item”>

<view class=“weui-form-preview__label”>商品</view>

<view class=“weui-form-preview__value”>电动打蛋机</view>

</view>

<view class=“weui-form-preview__item”>

<view class=“weui-form-preview__label”>标题标题</view>

<view class=“weui-form-preview__value”>名字名字名字</view>

</view>

<view class=“weui-form-preview__item”>

<view class=“weui-form-preview__label”>标题标题</view>

<view class=“weui-form-preview__value”>很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</view>

</view>

</view>

<view class=“weui-form-preview__ft”>

<navigator class=“weui-form-preview__btn weui-form-preview__btn_default” hover-class=“weui-form-preview__btn_active”>辅助操作</navigator>

<navigator class=“weui-form-preview__btn weui-form-preview__btn_primary” hover-class=“weui-form-preview__btn_active”>操作</navigator>

</view>

</view>

</view>

</view>

原官方wxss


https://github.com/Tencent/weui-wxss/blob/master/dist/style/weui.wxss

源码有点多,就直接上原下载源码的链接

说了怎么多,我就想知道出了什么问题?

该如何解决?

1 回复

右边的是有字体大小限制的,

左边的标题是没有字体大小限制的,

自己给左边标题的写上和右边的内容一样的字体大小就没问题了。官方写的默认是14px。

回到顶部