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,635評論 0 0
  • 更新:如果想實現,簡單的行間距的,可利用 利用這個行高屬性,可以模擬出行間距的效果,不過得根據字號大小來調整這個值...
    十一歲的加重閱讀 2,504評論 6 2
  • 本節任務 學習 a標簽的使用 定義 組件定義了指向某個頁面的一個超鏈接。 請注意 1.這個超鏈接一定是weex頁面...
    酷走天涯閱讀 1,072評論 0 0
  • 官方手冊 用于包裝其它組件的最基本容器。 不能直接在里面添加文本(字符串),如果要展示文本,應該使用 <text>...
    松哥888閱讀 748評論 0 1
  • 18歲生日過去了40多天,也還算是個年輕人,最近經常會想,我們的年輕到底代表著什么? 回顧自己的前18年,度過了無...
    朱六子閱讀 468評論 0 1