uniapp 小程序 H5 移动端写 table 表格组件

前端菜鸟日常

于 2022-07-21 16:19:31 发布

阅读量3k

点赞数

分类专栏： dom demo 文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/weixin_46476460/article/details/125914834

版权

demo 同时被 2 个专栏收录

20 篇文章 5 订阅

订阅专栏

dom

4 篇文章 0 订阅

订阅专栏

这是一个使用Vue.js编写的移动端用户统计页面模板，包含查询按钮、表格展示以及分页功能。页面使用scroll-view进行横向滚动，表格数据显示本月、本年累计和累计同比增长%，并实现了上一页、下一页的切换。数据加载过程中显示加载中提示。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <view class="userStatistics">
    <scroll-view scroll-x class="bg-white nav text-center">
        <view class="botton" @click="getList">查询</view>
        <view class="table">
          <view class="tr bg-w">
            <view class="th">月份</view>
            <view class="th">本月</view>
            <view class="th">本年累计</view>
            <view class="th">累计同比增长%</view>
          </view>
          <block v-for="(item, index) of listData" :key="item.code">
            <view class="tr bg-g" v-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" v-else>
              <view class="td">{{ item.code }}</view>
              <view class="td">{{ item.text }}</view>
              <view class="td">{{ item.type }}</view>
            </view></block
          >
        </view>
        <view class="pageList">
          <view :class="current == 1 ? 'disable' : ''" @click="changePage(1)"
            >上一页</view
          >
          <view>当前页：{{ current }}</view>
          <view @click="changePage(2)">下一页</view>
        </view>
      </view>
    </scroll-view>
    <view class="cu-load load-modal" v-if="loadModal">
      <!-- <view class="cuIcon-emojifill text-orange"></view> -->
      <image src="/static/logo.png" mode="aspectFit"></image>
      <view class="gray-text">加载中...</view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import moment from "moment";
export default {
  name: "statistics",

  data() {
    return {
      loadModal: false,
      current: 1,
      pageSize: 10,
      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" },
      ],
      url: { list: "/mobile/list", 
      },
      loadModal: false,
      month: undefined,
    };
  },
  watch: {
    current: {
      immediate: true,
      handler() {
        // console.log(this.district, "6666nnn");
        this.getList();
      },
    },
  },

  mounted() {
    let _self = this;
    _self.getList();
  },
  methods: {
    changePage(val) {
      if (val === 1) {
        if (this.current !== 1) this.current--;
      }
      if (val === 2) {
        this.current++;
      }
    },
    getList() {
      let _self = this;
      // _self.loadModal = true;
      _self.$http
        .get(this.url.list, { current: this.current, pageSize: this.pageSize })
        .catch((err) => {
          _self.loadModal = true;
          // console.log(err);
        });
    },

  },
};
</script>

<style lang="scss">
.userStatistics {
  .container {
    color: #358deb;
    padding: 10px;
    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: #358deb;

      color: #fff;

      display: flex;

      height: 3rem;

      align-items: center;
    }
    .pageList {
      display: flex;
      margin-top: 10px;
      justify-content: space-around;
    }
    .disable {
      color: rgb(214, 174, 174);
    }
  }
}
</style>