So fügen Sie eine Tabelle in ein Miniprogramm ein-Mini-Programmentwicklung-php.cn

So fügen Sie eine Tabelle in ein Miniprogramm ein

尚

Freigeben： 2020-04-03 09:30:47

Original

6191 Leute haben es durchsucht

So fügen Sie eine Tabelle in ein Miniprogramm ein

Wir können den Tabellenstil durch Flex-Layout in der Containeransicht der WeChat-Applet-Ansicht implementieren.

Flex ist die Abkürzung für Flexible Box. Wie der Name schon sagt, handelt es sich um ein „elastisches Layout“ und wird verwendet, um maximale Flexibilität für Box-Modelle zu bieten.

Jeder Container kann als Flex-Layout festgelegt werden.

table.wxml

<view class="table">
  <view class="tr bg-w">
    <view class="th">head1</view>
    <view class="th">head2</view>
    <view class="th ">head3</view>
  </view>
  <block wx:for="{{listData}}" wx:key="{{code}}">
    <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
      <view class="td">{{item.code}}</view>
      <view class="td">{{item.text}}</view>
      <view class="td">{{item.type}}</view>
    </view>
    <view class="tr" wx:else>
      <view class="td">{{item.code}}</view>
      <view class="td">{{item.text}}</view>
      <view class="td">{{item.type}}</view>
    </view>
  </block>
</view>

Nach dem Login kopieren

table.wxss

.table {
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
}
.td {
    width:40%;
    justify-content: center;
    text-align: center;
}
.bg-w{
  background: snow;
}
.bg-g{
  background: #E6F3F9;
}
.th {
  width: 40%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 3rem;
  align-items: center;
}

Nach dem Login kopieren

table.js

Page({
  data: {
    listData:[
      {"code":"01","text":"text1","type":"type1"},
      {"code":"02","text":"text2","type":"type2"},
      {"code":"03","text":"text3","type":"type3"},
      {"code":"04","text":"text4","type":"type4"},
      {"code":"05","text":"text5","type":"type5"},
      {"code":"06","text":"text6","type":"type6"},
      {"code":"07","text":"text7","type":"type7"}
    ]
  },
  onLoad: function () {
    console.log(&#39;onLoad&#39;) 
  }

})

Nach dem Login kopieren

Das Rendering ist wie folgt

So fügen Sie eine Tabelle in ein Miniprogramm ein

Empfohlen: „Mini-Tutorial zur Programmentwicklung“

Das obige ist der detaillierte Inhalt vonSo fügen Sie eine Tabelle in ein Miniprogramm ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!