收藏
回答

ios真机下,scroll-view组件元素内容过长时,字体变大问题。求解

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 客户端 7.0.4 2.7.3

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;

}


最后一次编辑于  2019-06-27
回答关注问题邀请回答
收藏

2 个回答

  • 王恒祎
    王恒祎
    2019-09-17

    相同问题 也是ios 微信版本也一样  iphone6 6s 6sp x都试过了 都这样

    我看其他有评论把文字用absolute定位的,试了试管用

    希望官方早点解决这种问题

    2019-09-17
    有用
    回复
  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2019-06-27

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2019-06-27
    有用
    回复 2
登录 后发表内容