用代码手写一个自适应高度的Uni-app表格

2023-09-01 12:57:21

好的，我来为您撰写一篇关于Uni-app自适应高度表格的博文。

Uni-app 是一款优秀的跨平台开发框架，它可以帮助开发者快速构建iOS、Android、H5等平台的应用。Uni-app 自带了丰富的组件，包括表格组件。但是，Uni-app 自带的表格组件有一些局限性，比如不支持自适应高度。

那么，如何用代码手写一个自适应高度的Uni-app表格呢？

首先，我们需要创建一个新的Uni-app项目。然后，在项目的pages目录下创建一个新的页面文件，比如page1.vue。在page1.vue文件中，我们需要编写以下代码：

<template>
  <view class="container">
    <view class="table-wrapper">
      <view class="table-head">
        <view class="table-cell">姓名</view>
        <view class="table-cell">年龄</view>
        <view class="table-cell">性别</view>
      </view>
      <view class="table-body">
        <view v-for="item in list" class="table-row">
          <view class="table-cell">{{ item.name }}</view>
          <view class="table-cell">{{ item.age }}</view>
          <view class="table-cell">{{ item.gender }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 22, gender: '女' },
        { name: '王五', age: 24, gender: '男' },
      ]
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
.table-wrapper {
  width: 100%;
  height: 100%;
}
.table-head {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f5f5f5;
}
.table-body {
  flex: 1;
  overflow-y: auto;
}
.table-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #ddd;
}
.table-cell {
  flex: 1;
  padding: 10px;
}
</style>