时间戳

首页 > 解决方案 > create table using weex

css - create table using weex

问题描述

I need to build an app that has a table. I tried using html <table> tags to build a table. Even though it shows the table as i require when i run using npm run serve when i build an apk and run it on my android device the output is messed up. Does anyone know how to build a table in weex. And does anyone have any good documentations or tutorials regarding weex. thanks SCAN QR code with weex playground app to see output

标签： csshtml-tableweex

解决方案

正如其他人所评论的那样，Weex 不使用 HTML，而是使用看起来相似的 XML 语法。所以你需要实现类似于 using only <div>s 的东西。我必须这样做，所以我不妨把它贴在这里。

<template>
  <div class="table">
    <div class="row heading">
      <div class="cell headingColumn">Table</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
    </div>
    <div class="row">
      <div class="cell headingColumn">Row 1</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
    </div>
    <div class="row">
      <div class="cell headingColumn">Row 2</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
    </div>
  </div>
</template>
<style scoped>
.table {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  height: 60px;
}
.cell {
  display: flex;
  justify-content: center;
  align-items: center;

  flex-grow: 1;

  /*width: 100px;*/
  padding: 20px;
}
.heading {
  background-color: grey;
  font-weight: bold;
}

.headingColumn {
  width: 120px;
}
</style>

将其复制并粘贴到 dotwe.org 中，它将在 Android 和 Web 中按预期工作和呈现。

作为旁注，如果您min-width为列指定固定宽度（或 s），则样式会容易得多。这就是为什么我指定了一个.headingColumn类并且里面有一个注释width:100px值.cell。

顺便说一句，您可能需要编辑并在其中添加一个标签，其中包含您想要的文本内容。

推荐阅读