создать таблицу с помощью weex - PullRequest
Новая
       17

создать таблицу с помощью weex

0 голосов
/ 17 мая 2018

Мне нужно создать приложение с таблицей. Я пытался использовать теги html <table> для создания таблицы. Несмотря на то, что он показывает таблицу, как мне требуется, когда я запускаю с помощью npm run serve, когда я собираю apk и запускаю его на моем устройстве Android, выход выводится неправильно. Кто-нибудь знает, как построить таблицу в weex. И есть ли у кого-нибудь хорошая документация или учебники, касающиеся weex. Спасибо SCAN QR code with weex playground app to see output

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

Как прокомментировали другие, Weex не использует HTML, а имеет синтаксис XML, который выглядит одинаково. Поэтому вам нужно реализовать что-то похожее на использование только <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 и в Интернете.

В качестве примечания: если вы укажете фиксированную ширину (или min-width с) для столбцов, стилизация будет намного проще. Вот почему я указал класс .headingColumn, и внутри .cell.

есть закомментированное значение width:100px.

Кстати, вам может понадобиться отредактировать и добавить в них тег с нужным вам текстовым содержимым.

0 голосов
/ 24 мая 2018

Это похоже на HTML, но Weex не отображает фактический HTML на нативном. <div> s, которые вы пишете, являются компонентами Weex, которые переводятся на целевую платформу.

Таким образом, при работе в браузере может отображаться таблица, пока у Weex не будет компонента по умолчанию <table>, он не будет отображаться на нативном, как вы ожидаете.

Вы можете создать свой собственный компонент и выложить его с помощью flexbox.

...