收藏
回答

后台data进行列表渲染发现的元素长度异常问题

问题模块
API和组件

公司名称

个人

MP帐号(邮箱)

769928778@qq.com

开发者微信号

rt94rq

机型(如iPhone 6s plus)

iPhoneSE、开发者工具

操作系统(如iOS 9.3)

与手机系统无关、IOS10.2.1

是否必现


出现时间

view组件中的数据是由js中的data生成时元素长度出现异常

操作路径(即如何操作可以复现该问题)

1、建立一父元素M为使用flex布局的元素,样式为:{

display:-webkit-flex;

display:flex;

-webkit-flex-direction:row;

flex-direction:row;

width:750rpx;

height:48px;

box-sizing:border-box;

}

2、其中两个子元素,一个固定宽度、一个为元素A样式为:flex:auto(自适应宽度)

3、为自适应宽度A元素内子元素B,样式为{

width:100%;

height:20px;

word-break:keep-all;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

4、现有若干个M元素构成列表,部分B元素使用不同长度的文本内容进行UI测试。

4、使用开发者工具中的“wxml”工具,为未超长的元素B改变文本内容,使之内容超长,发现能够触发预料的超出内容变成省略号样式效果。

5、使用开发者工具中的“wxml”工具,为已超长的元素B改变文本内容,发现即使改为没有内容,元素的长度依然为之前的超长状态的长度,且超出内容变成省略号样式无法生效。

问题描述(具体问题介绍)

元素的长度更像是根据后台元素长度生成的,而非受css样式控制的。

问题截图(客户端问题界面截图)

目标元素样式:
由数据遍历生成的内容超长元素长度:
静态的数据超长元素长度及效果:

代码片段截图









                                                                                                                  

最后一次编辑于  2017-03-14
回答关注问题邀请回答
收藏