weex 组件实践 :cell

image.png

<template>
  <div class="container">
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
        <div class="rightView">
          <text class="title">我是标题</text>
          <text class="subTitle">我是子标题</text>
          </div>
        
    </div>
  </div>
</template>

<style>
  .cell { 
    margin-top: 10; 
    margin-left: 10; 
    flex-direction: row;
    /*background-color:gray;*/
    border-style:bottom;
    border-width:1px;
    border-color:gray;
    
  }
  .thumb { 
    width: 200px; 
    height: 200px; 
    
  }
  .rightView { 
    flex: 1; 
    margin-left:50px;
    color: white; 
    font-size: 50;
    /*background-color:red;*/
    
  }
  .title { 
    text-align: left; 
    color: white; 
    font-size: 50;
    background-color:blue;
    
  }
  .subTitle {
    /*position: absolute;*/
    /*bottom: 0px;*/
    /*left:0px;*/
    /*right:0px;*/
    text-align: left; 
    color: red; 
    font-size: 50;
    background-color:yellow;
    
  }
</style>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 官方手册 用于定义列表中的子列表项,类似于 HTML 中的ul之于li。Weex 会对<cell> 进行高效的内存...
    松哥888阅读 2,650评论 0 0
  • 更新:如果想实现,简单的行间距的,可利用 利用这个行高属性,可以模拟出行间距的效果,不过得根据字号大小来调整这个值...
    十一岁的加重阅读 2,534评论 6 2
  • 本节任务 学习 a标签的使用 定义 组件定义了指向某个页面的一个超链接。 请注意 1.这个超链接一定是weex页面...
    酷走天涯阅读 1,090评论 0 0
  • 官方手册 用于包装其它组件的最基本容器。 不能直接在里面添加文本(字符串),如果要展示文本,应该使用 <text>...
    松哥888阅读 758评论 0 1
  • 18岁生日过去了40多天,也还算是个年轻人,最近经常会想,我们的年轻到底代表着什么? 回顾自己的前18年,度过了无...
    朱六子阅读 480评论 0 1