PROSAGA码农传奇-Weex-使用weex创建表

使用weex创建表

作者: 哦豁
发布时间: 2024-12-17 01:01:08 (20天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    正如其他人所评论的那样，Weex不使用HTML，而是使用看似相似的XML语法。所以你需要实现类似于仅使用的东西
     <code>
      <div>
    </code>
    秒。我不得不这样做，所以我不妨在这里发布。
  </p>
   <pre>
    <code>
      <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>

</code>
  </pre>
  <P>
    将其复制并粘贴到dotwe.org中，它将在Android＆amp;网络。
  </p>
  <HR />
  <P>
    作为旁注，如果指定固定宽度（或
     <code>
      min-width
    </code>
    s）对于列，样式将更容易。这就是为什么我指定了一个
     <code>
      .headingColumn
    </code>
     上课并有评论
     <code>
      width:100px
    </code>
     里面的价值
     <code>
      .cell
    </code>
    。
  </p>
  <HR />
  <P>
    顺便说一下，您可能需要编辑并在其中添加一个标签，其中包含您想要的文本内容。
  </p>
</DIV>