首先上效果图：
以上的布局一定很常见，在原生中很好实现，但是在weex里面，这个布局并没有那么好实现，
其实这个布局中并没有什么不可理解的东西，主要的难点就在于中间的text和小红点的位置是如何进行控制的，
首先我们查看weex官方文档可以知道，<text>在显示较长的文字内容的时候，我们如果需要设置超出部分使用
省略号（“...”）表示的话，那么这里有两个需要注意的点：<text>内部需要设置宽度和text-overflow:ellipsis，但是如果我们设置了宽度，那么红点就无法紧跟在<text>文字后面了，那么这个时候，我们需要引入一个weex官网没有提到的属性：max-width，这个顾名思义，就是设置最大宽度值，这个时候别忘了还有一个属性:lines:1。
以下是代码：同样可以直接运行：
注意安装weex-ui,：weex-ui使用教程https://alibaba.github.io/weex-ui/#/cn/with-weex-toolkit
<template>
<div style="flex:1;width: 750px; background-color: #F7F7F7">
<div style="height: 100px; width: 750px; background-color: #0094ff; justify-content: center">
<text style="font-size: 40px;color: cornsilk; margin-left: 30px">红点自适应deom</text>
</div>
<list style="flex: 1; width: 710px; margin-left: 20px;">
<cell v-for="(item,index) in data" :key="index">
<div class="itemStyle">
<wxc-icon name="clock" size="xs" style="width:40px; height:40px"></wxc-icon>
<!--<image src="" style="width:40px; height:40px"></image>-->
<div style="margin-left: 33px; height:132px; flex: 1">
<div style="flex-direction: row">
<text class="fileNameStyle">{{item}}</text>
<div class="redDotStyle">
<text style="color: #ffffff; font-size: 16px">3</text>
</div>
</div>
<text class="itemDateStyle">2019-03-29 20:00</text>
</div>
<!--<image src="" class="itemRightIconStyle"></image>-->
<wxc-icon name="wrong" size="xs" class="itemRightIconStyle"></wxc-icon>
</div>
</cell>
</list>
</div>
</template>
<script>
const animation = weex.requireModule('animation');
// var modal = weex.requireModule("modal");
import { WxcIcon } from 'weex-ui'
export default {
components: { WxcIcon },
data() {
return {
data:[
"时候带合",
"你好sad海东卡活动IQ我去换",
"时候带合适的话我二哈和和好违和偶期无",
"时候带合适的话我二哈和和好违和后",
"时候带合偶尔后",
"你和我去换我去武汉",
"时候带合适的话我偶尔会去哈哈",
"时候带合适的都请我喝ing哈",
"时候带合适的owing哈哈",
],
}
},
}
</script>
<style space>
.itemStyle{
width: 713px;
margin-left: 39px;
flex-direction: row;
height: 132px;
align-items: center;
/*justify-content: space-between;*/
border-bottom-color: #EBEBEB;
border-bottom-width: 1px;
}
.fileNameStyle{
margin-top: 30px;
max-width:490px;
color:#333333;
font-size:32px;
font-weight: bold;
lines:1;
text-overflow:ellipsis;
}
.redDotStyle{
margin-left: 10px;
margin-top: 20px;
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #FF6666;
justify-content: center;
align-items: center
}
.itemDateStyle{
font-size: 24px;
color:#999999;
margin-top: 20px;
}
.itemRightIconStyle{
width: 92px;
height: 132px;
padding: 50px 30px;
}
</style>
本来是想把效果写好看点，但由于小图片资源确实难找，所以这里采用了weex-ui的两个小图片占个位。如果大家有好的小图标的资源，可以分享一波，不胜感激，同时希望和大家进行技术交流，如有疑问或者错误的地方，可以在下方留言。
