使用weex创建表

Question

我需要构建一个有桌子的应用程序。我尝试使用html <table>标签来构建表格。即使它在我使用npm run serve运行时显示我需要的表格，当我构建一个apk并在我的Android设备上运行它时输出搞砸了。 有谁知道如何在weex中构建表。 有没有人有关于weex的任何好的文档或教程。 谢谢

Answer 1

它看起来像HTML，但Weex不会在原生HTML上呈现实际的HTML。您编写的<div>是Weex组件，可以转换为目标平台。

因此，在浏览器上运行时可能会呈现表，直到Weex有一个默认的<table>组件，它不会像您期望的那样在本机上呈现。

您可以使用flexbox创建自己的组件并进行布局。

Answer 2

正如其他人所评论的那样，Weex并不使用HTML，而是使用看似相似的XML语法。所以你需要实现类似于仅使用ng serve -o 的东西。我不得不这样做，所以我不妨把它发布在这里。

<div>

将其复制并粘贴到dotwe.org中，它将在Android＆amp;网络。

作为旁注，如果为列指定固定宽度（或<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> s），样式将更容易。这就是为什么我已经指定了min-width课程并且.headingColumn内有width:100px评论的值。

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