ios手机系统版本初步验证:12.2 和 12.3.1都可以复现该问题。(安卓手机尚未发现该类问题)问题复现具体描述:当scroll-view组件渲染的某一个子节点文字内容超出ios手机屏幕宽度时,字体自动变大。反之,则没有问题。
- 当前 Bug 的表现(可附上截图)
- 预期表现(以正确显示的安卓手机为例)
- 复现路径
- 提供一个最简复现 Demo
wxml:
<view class='container' style='background-color:{{backgroundColor}};'>
<scroll-view scroll-into-view="{{intoView}}" scroll-x scroll-with-animation>
<block wx:for='{{tabs}}' wx:key='{{index}}'>
<view id="tabbar{{index}}" class='tab' style='font-weight:{{currentIndex == index ? "500": "normal"}}' bindtap='clickTab' data-index='{{index}}'>
{{item.name}}
<view class='indicator' style='background-color:{{currentIndex == index ? "#fff" : ""}}'></view>
</view>
</block>
</scroll-view>
</view>
js:
Component({
properties: {
tabs: {
type: Array,
value: []
},
currentIndex: {
type: Number,
value: 0
},
intoView: {
type: String,
value: 'tabbar0',
}
},
data: {
backgroundColor: getApp().store.$state.config.color.primary
},
methods: {
clickTab(e) {
const index = e.currentTarget.dataset.index
this.triggerEvent('tabbarclick', { index }, {})
this.setData({
currentIndex: index,
intoView: `tabbar${index}`
})
}
}
})
css:
.container {
overflow: hidden;
white-space: nowrap;
}
.tab {
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: inline-block;
padding: 20rpx 24rpx 8rpx 24rpx;
/* background-color: green; */
color: #fff;
font-size: 32rpx;
}
.indicator {
margin: 10rpx auto 0 auto;
width: 64rpx;
height: 6rpx;
border-radius: 4rpx;
}
相同问题 也是ios 微信版本也一样 iphone6 6s 6sp x都试过了 都这样
我看其他有评论把文字用absolute定位的,试了试管用
希望官方早点解决这种问题
麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
iphone6,ipnone7微信版本号、系统版本号都写了呀,你仔细看了吗?
代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)