如何在小程序中插入表格-小程序开发-PHP中文网

如何在小程序中插入表格

尚

发布： 2020-04-03 09:30:47

原创

6498人浏览过

如何在小程序中插入表格

我们可以在微信小程序视图容器view中通过flex布局实现表格样式。

Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。

任何一个容器都可以指定为Flex 布局。

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>

登录后复制

table.wxss

易森网络企业版

如果您是新用户，请直接将本程序的所有文件上传在任一文件夹下，Rewrite 目录下放置了伪静态规则和筛选器，可将规则添加进IIS，即可正常使用，不用进行任何设置；(可修改图片等)默认的管理员用户名、密码和验证码都是：yeesen系统默认关闭，请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld

查看详情

.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;
}

登录后复制

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('onLoad') 
  }

})

登录后复制

效果图如下