vant-list实现下拉加载更多

<template>
  <div class="home-wrapper">
    <div class="swipe-box">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" class="swipe-img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="tab-box">
      <div class="tab-box-header" :class="{'is-fixed': isFixed}">
        <van-tabs  v-model="currentType"  @click="selectTab" :ellipsis="false" :border="false" swipeable>
          <van-tab v-for="(item, idx) in tabList" :key="idx" :title="item.name"></van-tab>
        </van-tabs>
        <van-dropdown-menu>
          <van-dropdown-item v-model="todoType" :options="todoTypeList" @change="changeStatus" />
        </van-dropdown-menu>
      </div>
      <div class="tab-content" :class="{'is-fixed': isFixed}">
        <ul class="status-list" v-if="todoType !== 0">
          <li
            v-for="(item, index) in statusList"
            :key="index"
            :class="[{ active: currentStatus == item.workflowStatus }, 'status-item']"
            @click="selectStatusTab(item)"
          >{{ item.name }}</li>
        </ul>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list :finished="finished"  @load="loadMore" class="todo-list" >
            <li class="todo-item" v-for="item in todoList" :key="item.id" @click="jumpDetail(item)">
              <div class="todo-top">
                <div class="title-box">
                  <i class="icon-urgent" v-if="item.message && item.message.length > 0"></i>
                  <div class="app-name ">{{ item.menu_name }}</div>
                  <div class="app-title txt-ellipsis">{{ item.title }}</div>
                </div>
                <div class="content-box">
                  <div class="todo-container" :style="{color: computedColor(item).color, background: computedColor(item).bg}">
                    <span class="icon-qi" :style="{background: computedColor(item).color}">企</span> {{ item.spaceName }}
                  </div>
                  <div class="system-name">{{ item.systemName }}</div>
                </div>
                <div class="todo-launcher">{{item.start_handler}} 发起于 {{ item.created_at.substring(5, 16) }}</div>
              </div>
              <div class="todo-body">
                <span class="update-time"> 更新于{{ item.update_at.substring(5, 16) }} </span>
                <span class="node-name"> {{ item.step_title }} </span>
              </div>
            </li>
          </van-list>
        </van-pull-refresh>
        <div class="loading4" v-if="loading">
          <div class="three1"></div>
          <div class="three2"></div>
          <div class="three3"></div>
        </div>
        <div class="no-data"  v-if="!loading && finished">没有数据啦</div>
      </div>
    </div>
  </div>
</template>

<script>
import { jsBridgeReady } from '@qycloud/js-bridge';
import { $http } from '@commonbox/utils';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
  name: 'Home',
  data() {
    return {
      images: [
        require('../../assets/images/swipe-img1.png'),
        require('../../assets/images/swipe-img1.png'),
        require('../../assets/images/swipe-img1.png'),
        require('../../assets/images/swipe-img1.png'),
      ],
      tabList: [{
        name: '全部企业',
        enterprise_id: '',
        id: 0,
      }],
      currentType: 0,
      enterpriseId: '',
      todoTypeList: [
        { text: '待办工作', value: 0 },
        { text: '最近处理', value: 1 },
        { text: '我发起的', value: 2 },
      ],
      todoType: 0, // 默认代办
      statusList: [{
        name: '进行中',
        workflowStatus: 'running',
      }, {
        name: '已完成',
        workflowStatus: 'finished',
      }],
      currentStatus: 'running',
      todoList: [],
      isFixed: false,
      scrollTop: 0,

      refreshing: false,
      loading: false, // 加载状态
      finished: false, // 是否加载

      pageIndex1: 0, // 页数
      pageIndex2: 0, // 页数
      pageIndex3: 0, // 页数
      pageSize: 10 // 条数
    };
  },
  computed: {
    isNoData() {
      return this.todoList && this.todoList.length > 0;
    },
    computedColor() {
      const containerColorList = [
        {
          name: '物流事业部', bg: '#EEF0FF', color: '#3E3C9E', id: 'wuliushiyebu',
        },
        {
          name: '中化南通', bg: '#FFE9F2', color: '#FF2C7F', id: 'zhonghuanantonggang',
        },
        {
          name: '中化兴中', bg: '#E5F2F1', color: '#007F7A', id: 'zhonghuazhoushan',
        },
        {
          name: '中化运营', bg: '#344051', color: '#4380F0', id: 'zhonghuayunying',
        },
        {
          name: '天津仓储', bg: '#F8F2EE', color: '#B9805E', id: 'zhonghuatianjin',
        },
        {
          name: '中化扬州', bg: '#E7EDFF', color: '#6075B7', id: 'zhonghuayangzhou',
        },
        {
          name: '中化东方', bg: '#F5ECFC', color: '#945FB9', id: 'zhonghuadongfang',
        },
        {
          name: '应急基地', bg: '#E7F6EC', color: '#18A549', id: 'yingjijidi',
        },
        {
          name: '舟山国储', bg: '#EAF7FF', color: '#0050B3', id: 'zhoushanguochu',
        },
        {
          name: '中化兴海', bg: '#FFE6E8', color: '#FF0D1A', id: 'zhonghuaxinghai',
        },
      ];
      return (item) => {
        const tempItem = containerColorList.filter(res => res.id === item.spanSpace);
        return tempItem[0];
      }
    },
  },
  methods: {
    jumpDetail(item) {
      const appIdList = [
        'donghuozuoyexukeguan',
        'dongtuzuoyexukeguanl',
        'diaozhuangzuoyexukeg',
        'gaochuzuoyexukeguanl',
        'shouxiankongjianzuoy',
        'linshiyongdianzuoyex',
        'mangbanchouduzuoyexu',
        'duanluzuoyexukeguanl',
        'renkongkaiqizuoyexuk',
        'shexianzuoyexukeguan',
      ]
      if (appIdList.includes(item.workflow_id)) {
        // 调大钊哥页面
        /* eslint-disable */
        const url = `${location.protocol}//${location.host}/bee/mobileportal/${item.spanSpace}/lego-app-form?spaceId=${item.spanSpace}&module=workflow&appId=${item.workflow_id}&appName=${item.title}&formId=${item.instance_id}&node=${item.step_id}&back=todo&scId=`
        jsBridgeReady((bridge) => {
          bridge.callHandler('openWebview', { url })
        });
      } else {
        jsBridgeReady((bridge) => {
          bridge.callHandler(
            'openFormDetail',
            {
              appType: 'workflow',
              appId: item.workflow_id,
              action: 2, // 查看
              instanceId: item.instance_id,
              entId: item.spanSpace,
              title: item.title,
              nodeId: item.step_id,
            },
            (res) => {
              console.log('成功');
            },
          );
        });
      }
    },
    selectTab(index) {
      this.currentType = index;
      for (let i = 0; i < this.tabList.length; i++) {
        const item = this.tabList[i];
        if (item.id === index) {
          this.enterpriseId = item.enterprise_id;
        }
      }
      this.currentStatus = 'running';
      this.queryNum();
      if (this.todoType === 0) {
        this.todoList = [];
        this.pageIndex1 = 1;
        this.getPendingWorkList();
      } else if (this.todoType === 1) {
        this.todoList = [];
        this.pageIndex2 = 1;
        this.getRecentlyProcessedList();
      } else if (this.todoType === 2) {
         this.todoList = [];
        this.pageIndex3 = 1;
        this.getInitiatedList();
      }
    },
    selectStatusTab(item) {
      this.currentStatus = item.workflowStatus;
      if (this.todoType === 0) {
        this.todoList = [];
        this.pageIndex1 = 1;
        this.getPendingWorkList();
      } else if (this.todoType === 1) {
        this.todoList = [];
        this.pageIndex2 = 1;
        this.getRecentlyProcessedList();
      } else if (this.todoType === 2) {
        this.todoList = [];
        this.pageIndex3 = 1;
        this.getInitiatedList();
      }
    },
    // 获取可切换容器列表
    getUserSpaceList() {
      $http.get('/sdkuser/pendingWorkApi/getUserSpaceList').then((res) => {
        if (res.data.status === 200) {
          res.data.data.forEach((item, index) => {
            this.tabList.push({
              name: item.name,
              enterprise_id: item.enterprise_id,
              id: index + 1,
            })
          });
        }
      });
    },
    // 获取待办数据
    queryNum() {
      const queryParams = {
        entIdApp: this.enterpriseId,
      };
      $http.get('/sdkuser/pendingWorkApi/getWorkTotalCountWithApp', {
        params: queryParams,
      }).then((res) => {
        if (res.data.status === 200) {
          this.todoTypeList[0].text = `待办工作(${res.data.data.pendingTotalCount})`;
          this.todoTypeList[1].text = `最近处理(${res.data.data.recentlyProcessedTotalCount})`;
          this.todoTypeList[2].text = `我发起的(${res.data.data.initiatedTotalCount})`;
        }
      });
    },
    changeStatus(val) {
      if (val === 0) {
        this.todoList = [];
        this.pageIndex1 = 1;
        this.getPendingWorkList();
      } else if (val === 1) {
        this.todoList = [];
        this.pageIndex2 = 1;
        this.getRecentlyProcessedList();
      } else if (val === 2) {
        this.todoList = [];
        this.pageIndex3 = 1;
        this.getInitiatedList();
      }
    },
    loadMore() {
      if (this.todoType === 0 && !this.loading) {
        this.pageIndex1 += 1; 
        this.getPendingWorkList();
      } else if (this.todoType === 1 && !this.loading) {
        this.pageIndex2 += 1; 
        this.getRecentlyProcessedList();
      } else if (this.todoType === 2 && !this.loading) {
        this.pageIndex3 += 1; 
        this.getInitiatedList();
      }
    },
    onRefresh() {
      this.finished = false; // 不写这句会导致你上拉到底过后在下拉刷新将不能触发下拉加载事件
      this.pageIndex1 = 0;
      this.pageIndex2 = 0;
      this.pageIndex3 = 0;
      this.todoList = [];
      this.loadMore();
    },
    // 获取待办数据
    getPendingWorkList() {
      if(this.loading) { return; }
      this.loading = true;
      const queryParams = {
        entIdApp: this.enterpriseId,
      };
      $http.get('/sdkuser/pendingWorkApi/getPendingWorkListWithApp', {
        params: queryParams,
      }).then((res) => {
        if (res.data.status === 200) {
          this.loading = false;
          let tempTodoList = res.data.result.result.slice( (this.pageIndex1-1) * this.pageSize, this.pageIndex1 * this.pageSize );
          this.todoList = this.todoList.concat(tempTodoList);
          if (this.pageIndex1 * this.pageSize  >= res.data.result.totalCount) {  
            this.finished = true;
          } else {
            this.finished = false;
          };
        }
      }).catch((error) => {
          console.log(error);
        })
        .finally(() => {
          this.refreshing = false;
          this.loading = false;
        });
    },
    // 获取过往数据
    getRecentlyProcessedList() {
      if(this.loading) {
        return;
      };
      this.loading = true;
      const queryParams = {
        entIdApp: this.enterpriseId,
        workflowStatus: this.currentStatus,
      };
      $http.get('/sdkuser/pendingWorkApi/getRecentlyProcessedListWithApp', {
        params: queryParams,
      }).then((res) => {
        if (res.data.status === 200) {
          this.loading = false;
          let tempTodoList = res.data.result.result.slice( (this.pageIndex2-1) * this.pageSize, this.pageIndex2 * this.pageSize );
          this.todoList = this.todoList.concat(tempTodoList);
          if (this.pageIndex2 * this.pageSize  >= res.data.result.totalCount) {  //数据全部加载完成
            this.finished = true;
          } else {
            this.finished = false;
          }   
        }
      }).catch((error) => {
          console.log(error);
        })
        .finally(() => {
          this.refreshing = false;
          this.loading = false;
        });
    },
    // 获取我发起的数据
    getInitiatedList() {
      if(this.loading) {
        return;
      };
      this.loading = true;
      const queryParams = {
        entIdApp: this.enterpriseId,
        workflowStatus: this.currentStatus,
      };
      $http.get('/sdkuser/pendingWorkApi/getInitiatedListWithApp', {
        params: queryParams,
      }).then((res) => {
        if (res.data.status === 200) {
          this.loading = false;
          let tempTodoList = res.data.result.result.slice( (this.pageIndex3-1)*this.pageSize, this.pageIndex3*this.pageSize );
          this.todoList = this.todoList.concat(tempTodoList);
          if (this.pageIndex3 * this.pageSize  >= res.data.result.totalCount) {  //数据全部加载完成
            this.finished = true;
          } else {
            this.finished = false;
          }   
        }
      }).catch((error) => {
        console.log(error);
      }).finally(() => {
        this.refreshing = false;
        this.loading = false;
      });
    },
    dataScroll() {
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      this.isFixed = this.scrollTop > 150;
    },
  },
  mounted() {
    this.getUserSpaceList();
    this.queryNum();
    window.addEventListener('scroll', this.dataScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.dataScroll, false);
  },
};
</script>

<style lang="scss" scoped>
// 单行溢出省略
.txt-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-wrapper {
  background: #f6f8fa;
  .swipe-box {
     100%;
    height: 150px;
    .van-swipe {
      height: 100%;
    }
    .swipe-img {
       100%;
      height: 100%;
    }
  }
  .tab-box {
    margin-top: 5px;
  }
  .tab-box-header {
    &.is-fixed {
      position: fixed;
      top: 0;
      z-index: 10;
       100%;
      box-shadow: 0 5px 5px #ccc;
    }
  }
  /deep/ .van-tabs__wrap {
    height: 45px;
    border-bottom: 1px solid #eee;
    .van-tab--active {
      color: #4982fe;
    }
    .van-tabs__line {
       background: #4982fe;
    }
    /deep/ .van-tab {
      height: 45px;
    }
  }

  /deep/ .van-dropdown-menu__bar {
    height: 40px;
  }
  /deep/ .van-dropdown-menu__title {
    padding: 0 20px;
  }
  /deep/ .van-dropdown-menu__item {
    justify-content: flex-start;
  }
  /deep/ .van-tabs__wrap--scrollable .van-tab--complete {
    margin: 0 10px;
  }
  .tab-content {
    padding: 8px;
     &.is-fixed {
       padding-top: 110px;
     }
    .status-list {
      display: flex;
      margin-bottom: 8px;
      .status-item {
        margin-right: 10px;
        font-size: 14px;
        padding: 5px 8px;
        color: #666;
        border-radius: 3px;
        &.active {
          color: #fff;
          background: #4982fe;
        }
      }
    }
    .todo-list {
      .todo-item {
        list-style: none;
        background: #fff;
        margin-bottom: 8px;
        border-radius: 2px;
        border: 1px solid #eaebec;
        .todo-top {
          border-bottom: 1px solid #eaebec;
          padding: 0 8px;
          .title-box {
            height: 42px;
            display: flex;
            align-items: center;
            .icon-urgent {
              display: inline-block;
               20px;
              height: 20px;
              background: url('../../assets/images/icon-urgent.png') no-repeat left top;
              background-size: 100%;
              margin-right: 4px;
            }
            .app-name {
              background: #5b8ff9;
              color: #fff;
              font-size: 12px;
              padding: 4px 5px;
              margin-right: 6px;
              white-space: nowrap;
            }
            .app-title {
              font-size: 15px;
              color: #333;
              font-weight:600;
            }
          }
          .content-box {
            height: 32px;
            display: flex;
            align-items: center;
            .todo-container {
              font-size: 12px;
              color: #0b0983;
              background: #eceeff;
              padding: 4px;
              white-space: nowrap;
              .icon-qi {
                font-size: 12px;
                background: #0b0983;
                color: #fff;
                padding: 1px 3px;
                border-radius: 2px;
              }
            }
            .system-name {
              margin: 0 8px;
              font-size: 12px;
              color: #373839;
              background: #edf2f8;
              padding:  4px;
              white-space: nowrap;
            }
          }
          .todo-launcher {
              height: 26px;
              line-height: 26px;
              margin-bottom: 6px;
              font-size: 13px;
              color: #666;
            }
        }
        .todo-body {
          height: 36px;
          padding: 0 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .update-time {
            font-size: 13px;
            color: #666;
          }
          .node-name {
            font-size: 13px;
            color: #FA8C15;
          }
        }
      }
    }
    .no-data {
       100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #999;
    }
  }
  .loading4 {
     150px;
    margin: 20px auto;
    text-align: center;
    div {
       16px;
      height: 16px;
      border-radius: 100%;
      display: inline-block;
      margin: 0 5px;
      background-color: #4982fe;
      -webkit-animation: three 1.4s infinite ease-in-out;
      animation: three 1.4s infinite ease-in-out;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      &:nth-of-type(1) {
        background-color: #8588A9;
      }
      &:nth-of-type(2) {
        background-color: #3BB3C4;
      }
      &:nth-of-type(3) {
        background-color: #3572B1;
      }
    }
    @-webkit-keyframes three {
      0%, 80%, 100% {-webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }
    @keyframes three {
      0%, 80%, 100% {-webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }
    .three1 {
      -webkit-animation-delay: -0.30s;
      animation-delay: -0.30s;
    }
    .three2{
      -webkit-animation-delay: -0.15s;
      animation-delay: -0.15s;
    }
  }
  
}
</style>