Создать таблицу с помощью weex
Мне нужно создать приложение со столом. Я пробовал использовать теги html <table> для построения таблицы. Несмотря на то, что он показывает таблицу, как мне нужно, когда я запускаю с помощью npm run serve, когда я создаю apk и запускаю его на своем устройстве Android, вывод не работает.
Кто-нибудь знает, как построить стол в weex.
И есть ли у кого-нибудь хорошие документы или руководства по Weex.
Благодарность
@PathumSamararathna Уже пробовал и получил такие же результаты
Ответы 2
Это похоже на HTML, но Weex не отображает фактический HTML на нативном языке. <div>, которые вы пишете, представляют собой компоненты Weex, которые переводятся на целевую платформу.
Таким образом, при запуске в браузере таблицы могут отображаться, пока Weex не получит компонент <table> по умолчанию, он не будет отображаться на нативном уровне, как вы ожидаете.
Вы можете создать свой собственный компонент и разложить его с помощью flexbox.
Как отмечали другие, Weex не использует HTML, а имеет похожий синтаксис XML. Поэтому вам нужно реализовать что-то вроде использования только <div>. Я должен был сделать именно это, так что я могу разместить это здесь.
<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 и в Интернете.
Кстати, если вы укажете фиксированную ширину (или min-width) для столбцов, стили будет намного проще. Вот почему я указал класс .headingColumn, а внутри width:100px есть закомментированное значение .cell.
Кстати, вам может потребоваться отредактировать и добавить в них тег с желаемым текстовым содержимым.
Используйте элементы div вместо элемента таблицы. ;)