vue+vant列表-复制可用

本篇文章列表可用于移动端分页类列表页面，实现了下拉刷新、滚动加载下一页、无数据时展示对应文字、多选列表、文字过长滚动显示功能。

vant

vant官网

完整代码

<template>
  <div>
    <!-- 外壳标签 -->
    <div class="page-body c-list-body">
      <!-- 下拉刷新组件 -->
      <van-pull-refresh
        v-model="refreshLoading"
        @refresh="onRefresh">
        <!-- 列表组件 -->
        <van-list
          v-model="loadingFlag"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :error.sync="isEmpty">
          <div class="list-box">
            <van-checkbox-group  v-model="selectItem">
              <ul class="listBox">
                <li v-for="(item, index) in list" :key="index">
                  <div :key="index" class="list_box">
                    <div class="list_head">
                      <div class="head_left"
                        style="width: calc(100% - 155px)">
                        <van-checkbox :name="item"
                          class="head-radio"
                          checked-color="#4293D9"></van-checkbox>
                        <div>
                          <div class="code">
                            {{item.code}}
                          </div>
                        </div>
                      </div>
                      <div class="head_right"
                        style="width: 150px">
                        <div style="width: 200px;transform-origin: left center;">
                          时间: {{item.time}}
                        </div>
                      </div>
                    </div>
                    <div class="list_head">
                      <div class="company">
                        <van-notice-bar
                          style="width: 100%; height: 100%; padding: 0; font-size: inherit"
                          color="inherit"
                          background="transparent">
                          {{item.name}}
                        </van-notice-bar>
                      </div>
                    </div>
                    <div class="list_foot">
                      <van-button plain
                        round size="mini"
                        color="#4293D9"
                      >查看详情</van-button>
                    </div>
                  </div>
                </li>
              </ul>
            </van-checkbox-group>
          </div>
          <div class="wrapper" v-if="isEmpty">
            <van-empty
              description="暂无数据"
              image-size="50%"
            />
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      // 加载状态
      refreshLoading: false,
      // 列表加载
      loadingFlag: false,
      // 列表是否完全加载完毕
      finished: false,
      // 列表是否加载失败
      isEmpty: false,
      // 列表数据
      list: [],
      // 列表接口传参
      params: {
        // 页数
        page: 1,
        // 每页条数
        limit: 6
      },
      totol: 9,
      pages: 0,
      // list多选数据
      selectItem: []
    };
  },
  methods: {
    /**
     * 刷新列表
     */
    onRefresh() {
      // 重置页码
      this.params.page = 1;
      // 设置为false表示列表未完成加载
      this.finished = false;
      // 列表loading
      this.loadingFlag = true;
      // 刷新表格
      this.onLoad();
    },
    /**
     * 加载列表
     */
    onLoad() {
      // 是否下拉刷新触发
      if (this.refreshLoading) {
        // 关闭下拉刷新的loading
        this.refreshLoading = false;
      }
      // 关闭错误加载提示
      this.isEmpty = false;
      // 调用列表接口
      this.getList(this.params);
    },
    /**
     * 获取列表数据函数,模仿接口调用、翻页
     */
    getList(params) {
      const that = this;
      // 此处为接口调用，按照自己项目调用方式修改即可
      this.$http.get({
        url: urls,
        data: params,
        success: function (res) {
          // 判断是否调用成功
          if (res.code === 200 && res.data.list && res.data.list.length) {
            const list = [...res.data.list];
            // 判断后赋值
            const condition = params.pageNo === 1 && params.pageSize !== 1;
            that.list = condition ? list : that.list.concat(list);
            // 翻页
            that.params.pageNo++;
          }
          if (res.data.list && params.pageNo !== 1) {
            // 全部数据加载完成
            that.finished = res.data.list.length < params.pageSize;
          }
          // 列表没有数据时, 展示特定提示
          that.endExecution()
        },
      })
    },
    /**
     * 接口调用结束
     */
    endExecution () {
      // 加载中数据
      this.loadingFlag = false;
      // 列表没有数据时, 展示特定提示
      this.isEmpty = this.list.length === 0;
    },
  }
};

.list {
  .listBox {
    flex: 1;
    width: 100%;
    height: calc(100% - 100px);
    background: #F7F7F7;
    .list_box {
      text-align: left;
      font-size: 14px;
      background: #ffffff;
      margin-bottom: 10px;
      padding: 5px 10px;
      box-sizing: border-box;
      @mixin text-gray {
        font-size: 12px;
        color: #999999;
      }
      .list_head {
        display: flex;
        justify-content: space-between;
        &:nth-child(2) {
            margin-bottom: 5px;
        }
        width: 100%;
        .head_left {
            flex: 1;
            display: flex;
            align-items: flex-start;
            .head-radio {
                margin-right: 10px;
            }
            >div:not(.head-radio) {
                flex: 1;
            }
        }
        .head_right {
          @include text-gray;
          >div {
            transform: scale(0.85);
            transform-origin: right center;
          }
        }
        .company {
          width: 100%;
          height: 20px;
          @include text-gray;
        }
      }
      .list_foot {
        display: flex;
        justify-content: flex-end;
        .van-button {
          padding: 2px 8px;
        }
      }
    }
  }
}