weex中实现单行展示文字跟小红点效果

首先上效果图：

以上的布局一定很常见，在原生中很好实现，但是在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的两个小图片占个位。如果大家有好的小图标的资源，可以分享一波，不胜感激，同时希望和大家进行技术交流，如有疑问或者错误的地方，可以在下方留言。