<scroll-view refresher-enabled="true" style="height:100%" :refresherTriggered="refresherTriggered" @refresherrefresh="refresh" :scroll-y="true" @scrollToUpper="upper" @scrolltolower="lower" @scroll="scroll">
          <view class="empty" v-if="!arrList.length">
            <van-empty image="search" description="暂无数据" />
          </view>
          <view v-else class="con-wrap">
            <view class="con-item" v-for="(item,index) in arrList" :key="index">
              <view class="con-item_left">
                <view class="con-item-left_img" :style="{background:item.bgColor}"><text class="iconfont" :class="`icon-${item.icon}`" /></view>
                <view class="con-item-left_title">{
    {
     item.fileName }}</view>
              </view>
              <view class="con-item_right">
                <button class="iconfont icon-fenxiang"></button>
              </view>
            </view>
            <view class="tips">
              <van-loading v-if="loading" size="10px" />
              {
    {
     text }}
            </view>
          </view>
        </scroll-view>

// 颜色数组
      colorArr: [
        {
    
          name: "doc",
          icon: "file-word-fill",
          bgColor: "linear-gradient(150deg,#4A99FF, #1B71F1)",
        },
        {
    
          name: "docx",
          icon: "file-word-fill",
          bgColor: "linear-gradient(150deg,#4A99FF, #1B71F1)",
        },
        {
    
          name: "ppt",
          icon: "file-ppt-fill",
          bgColor: "linear-gradient(150deg,#FFB94A, #FF8C1C)",
        },
        {
    
          name: "pptx",
          icon: "file-ppt-fill",
          bgColor: "linear-gradient(150deg,#FFB94A, #FF8C1C)",
        },
        {
    
          name: "pdf",
          icon: "PDF2",
          bgColor: "linear-gradient(150deg,#FF9393, #FF2727)",
        },
        {
    
          name: "mp4",
          icon: "shipinwenjian",
          bgColor: "linear-gradient(150deg,#A7A7EE, #6262C4)",
        },
        {
    
          name: "xlsx",
          icon: "file-excel-fill",
          bgColor: "linear-gradient(150deg,#34EA46, #23B248)",
        },
        {
    
          name: "xls",
          icon: "file-excel-fill",
          bgColor: "linear-gradient(150deg,#34EA46, #23B248)",
        },
        {
    
          name: "txt",
          icon: "TXTCopy",
          bgColor: "linear-gradient(150deg,#00FDF5, #05A59F)",
        },
        {
    
          name: "yinpin",
          icon: "mianxing-yinpin",
          bgColor: "linear-gradient(150deg,#FF87D3, #F21CA9)",
        },
      ],
      // 数组
      arrList: [],
      loading: true, //是否加载中
      refresherTriggered: false, //下拉刷新是否触发，false未触发
      text: "已经到底了！",
      query: {
    
        parentId: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,

 created() {
    
    this.getData();
  },
  methods: {
    
    // 获取列表接口数据
    getData() {
    
      sublist(this.query).then((res) => {
    
        let data = res.rows;
        this.total = res.total;
        data.forEach((item) => {
    
          // 根据文件后缀判断图标
          var suffixArr = item.fileUrl.split("."); //以.为分割，将fileUrl分割为多个数组
          var suffixCharacter = suffixArr[suffixArr.length - 1]; //数组的最后一个就是需要的文件后缀
          let picBg = this.colorArr.find((ele) => ele.name === suffixCharacter);
          item.icon = picBg.icon;
          item.bgColor = picBg.bgColor;
          this.arrList.push(item);
        });
        if (this.arrList.length < this.total) {
    
          this.loading = false;
          this.text = "上拉加载更多";
        } else if (this.arrList.length === this.total) {
    
          this.loading = false;
          this.text = "已经到底了！";
        }
      });
    },
    // 下拉刷新的函数
    refresh() {
    
      this.refresherTriggered = true;
      this.arrList = [];
      this.query.pageNum = 1;
      this.getData();
      setTimeout(() => {
    
        this.refresherTriggered = false;
      }, 1000);
    },
    // 滚动触到顶部时触发的函数
    upper(e) {
    
      // console.log("到顶部:", e);
    },
    // 滚动触底时触发的函数
    lower(e) {
    
      // console.log("触底:", e);
      if (this.arrList.length < this.total) {
    
        this.loading = true;
        this.text = "加载中...";
        this.query.pageNum++;
        this.getData();
      } else if (this.arrList.length === this.total) {
    
        this.loading = false;
        this.text = "已经到底了！";
      }
    },
    // 滚动时触发的函数
    scroll(e) {
    
      // console.log("滚动时:", e);
    },
  },

  .empty {
    
        margin: 0 auto;
      }

      .tips {
    
        text-align: center;
      }

      .con-item {
    
        background: #fff;
        border-radius: 20px;
        display: grid;
        justify-content: space-between;
        align-items: center;
        grid-template-columns: calc(100% - 160px) 80px;
        grid-column-gap: 60px;
        box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.07);
        margin: 0 28px;
        padding: 30px;
        margin-bottom: 30px;

        .con-item_left {
    
          display: grid;
          grid-template-columns: 80px calc(100% - 80px);
          align-items: center;

          .con-item-left_img {
    
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            // background: linear-gradient(#4A99FF, #1B71F1);
            border-radius: 50%;

            .iconfont {
    
              font-size: 36px;
              color: #fff;
            }
          }

          .con-item-left_title {
    
            font-weight: 700;
            color: #303133;
            margin-left: 24px;
          }
        }

        .con-item_right {
    
          text-align: right;

          .iconfont {
    
            font-size: 36px;
            color: #1890FF;
            background: #fff;
          }

          .iconfont::after {
    
            border: 1px solid rgba(0, 0, 0, 0);
          }
        }
      }