uview的列表uniapp之uview上拉加载和下拉刷新

onLoad中需要调用getList()
tab切换需要初始化data，然后调用getList()
开启下拉刷新需要在json文件配置

<template>
  <view class="view">
    <!--navbar-->
    <view class="navbar">
      <u-navbar
          :placeholder="true"
          title="三乱列表"
          @leftClick="leftClick"
          @rightClick="rightClick"
          rightText="搜索">
      </u-navbar>
    </view>

    <!-- 搜索栏-->
    <view class="search-box"
         catchtouchmove="true"
         :class="{ 'search-box-show': searchBoxShow }">
      <view class="search-form-content">
        <u--form
            labelPosition="left"
            :model="searchForm"
            ref="form">

          <!--所属街镇-->
          <u-form-item label="电话号码" label-width="80" borderBottom>
            <u--input v-model="searchForm.phone" border="none"></u--input>
          </u-form-item>

          <!--开始时间-->
          <u-form-item
              label="开始时间"
              prop="crimeTime"
              label-width="100"
              borderBottom>
            <udate-picker
                placeholder="请选择"
                :hide-second="true"
                :clear-icon="false"
                :border="false"
                type="datetime"
                v-model="searchForm.startTime">
            </udate-picker>
          </u-form-item>

          <u-form-item
              label="结束时间"
              prop="crimeTime"
              label-width="100"
              borderBottom>
            <udate-picker
                placeholder="请选择"
                :hide-second="true"
                :clear-icon="false"
                :border="false"
                type="datetime"
                v-model="searchForm.endTime">
            </udate-picker>
          </u-form-item>


          <!--部门-->
          <u-form-item
              label="部门"
              label-width="80"
              @click="itemPickerClick('orgId', 'orgName','orgList', 'id', 'name')"
              borderBottom>
            <u--input
                v-model="searchForm.orgName"
                disabled
                disabledColor="#ffffff"
                placeholder="请填写"
                border="none"
            ></u--input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>


          <!--状态-->
          <u-form-item
              label="状态"
              label-width="80"
              @click="itemPickerClick('status', 'statusName','statusList', 'value', 'name')"
              borderBottom>
            <u--input
                v-model="searchForm.statusName"
                disabled
                disabledColor="#ffffff"
                placeholder="请填写"
                border="none"
            ></u--input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>

        </u--form>

        <view class="btn-box">
          <u-button type="error" text=" 重置" @click="reset"></u-button>
          <u-button type="primary" text="确定" @click="search"></u-button>
        </view>

      </view>
    </view>

    <!--picker组件-->
    <u-picker
        :show="pickerShow"
        :columns="columns"
        :keyName="columnsLabel"
        :defaultIndex="defaultIndex"
        @confirm="pickerConfirm"
        @cancel="pickerShow = false">
    </u-picker>


    <!--列表-->
    <view class="list-box">
      <u-list @scrolltolower="scrolltolower" height="100%">
        <u-list-item class="u-border-bottom"
                     v-for="item in list"
                     :key="item.id">
            <view class="item" @click="toOperate(item)">
              <view class="item-img">
                <img :src="itemImgShow(item)" alt="">
              </view>
              <view class="item-content">
                <view class="u-line-1">执法部门: {{ item.orgName }}</view>
                <view class="u-line-1">执法人员: {{ item.userName }}</view>
                <view class="u-line-1">上报地点: {{ item.place }}</view>
                <view class="u-line-1">上报时间: {{ dateFormatting(item.applyTime) }}</view>
                <view class="u-line-1">状态: {{ statusMap[item.status] }}</view>
              </view>
            </view>

        </u-list-item>
        <u-loadmore :status="loadMoreStatus"/>
      </u-list>
    </view>

    <!-- 新增操作按钮 -->
    <view class="add-btn-box" @click="toAdd">
      <view class="add-btn"></view>
    </view>


  </view>
</template>

<script>
import lj from "@/common/lj"
import { threeMgtFindPage } from "@/common/api/page_ThreeMess/api";
import {
  getImgShowUrl,
  getLoginUserAvailableDepForOption
} from "@/common/api";
import UdatePicker from '@/components/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker'


export default {
  name: "index",
  components: {
    UdatePicker
  },
  data() {
    return{
      searchBoxShow: false,
      searchForm: {
        phone: '',
        startTime: '',
        endTime: '',
        status: '',
        statusName: '',
        orgId: '',
        orgName: '',
        page: 1,
        limit: 10,
      },
      list: [],
      total: 0,
      loadMoreStatus: 'loadmore',     // loading  nomore  loadmore

      statusMap: {
        0: '待处理',
        1: '需停机',
        2: '已处理',
      },
      statusList: [
        { name: '待处理', value: '0' },
        { name: '需停机', value: '1' },
        { name: '已处理', value: '2' },
      ],
      orgList: [],

      pickerShow: false,
      formValue: '',
      formShow: '',
      columns: [],
      columnsValue: '',
      columnsLabel: '',
      defaultIndex: [0],

    }
  },

  methods: {
    //返回
    leftClick() {
      this.tui.webView.postMessage({data:{
          action:"back"
        }})
    },
    //搜索
    rightClick() {
      this.searchBoxShow = !this.searchBoxShow;
    },
    //搜索
    search() {
      this.list = [];
      this.searchForm.page = 1;
      this.searchForm.limit = 10;
      this.getList();
    },
    //重置
    reset() {
      this.list = [];
      this.searchForm = {
        phone: '',
        startTime: '',
        endTime: '',
        status: '',
        statusName: '',
        orgId: '',
        orgName: '',
        page: 1,
        limit: 10,
      }
      this.getList();
    },

    //新增
    toAdd() {
      lj.navigateTo("./addEdit?title=新增");
    },
    //操作页面
    toOperate(item) {
      lj.navigateTo(`./addEdit?title=详情&id=${item.id}`);
    },
    //格式化时间
    dateFormatting(val) {
      if (!val) return '';
      return lj.dateFormatting(val, 'yyyy-MM-dd');
    },
    //拼接左侧图片
    itemImgShow(item) {
      if (item?.picture?.split(',')?.[0]) {
        return getImgShowUrl(item?.picture?.split(',')?.[0]);
      }
    },
    //触底加载
    scrolltolower() {
      if (this.loadMoreStatus == 'loading' || this.loadMoreStatus == 'nomore') {
        return;
      }
      this.searchForm.page++;
      this.getList()
    },
    getList() {
      this.loadMoreStatus = 'loading';
      const params = Object.assign({}, this.searchForm);
      delete params.statusName;
      delete params.orgName;
      threeMgtFindPage(params).then(res => {
        // console.log('列表数据', res);
        if (res?.code === 200) {
          this.list = [...this.list, ...res?.data?.list];
          this.total = res?.data?.total;
          if (this.searchForm.page * this.searchForm.limit >= res.data.total) {
            this.loadMoreStatus = 'nomore';
          } else {
            this.loadMoreStatus = 'loadmore';
          }
        }
      }).finally(() => {
        this.searchBoxShow = false;
      })
    },

    //获取部门
    getOrgList() {
      getLoginUserAvailableDepForOption({}, { 'X-Path': 'homeIndex' }).then(res => {
        // console.log('部门', res);
        if (res?.code === 200) {
          this.orgList = res?.data;
        }
      })
    },

    /**
     * @param formValue 对应form当中的上传的字段
     * @param formShow 对应form当中的上传的字段的页面展示
     * @param columns 当前对应pick的数据
     * @param columnsValue columns中的value字段
     * @param columnsLabel columns中的label字段
     * */
    itemPickerClick(formValue, formShow, columns, columnsValue, columnsLabel) {
      //注意这里的this.columns 是[[]] 这种结构的
      //注意这里的this.columns 是[[]] 这种结构的
      //注意这里的this.columns 是[[]] 这种结构的
      //注意这里的this.columns 是[[]] 这种结构的
      //注意这里的this.columns 是[[]] 这种结构的
      this.columns = [this[columns]];
      if (this[columns].length === 0) {
        lj.showToast({
          title: '无数据!',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      this.formValue = formValue;
      this.formShow = formShow;
      this.columnsValue = columnsValue;
      this.columnsLabel = columnsLabel;
      if (this.searchForm[this.formValue] !== '') {
        this.defaultIndex = [this.columns[0].findIndex(item => item[columnsValue] === this.searchForm[this.formValue])];
      } else {
        this.defaultIndex = [0];
      }
      this.pickerShow = true;

    },
    //pick的确认操作
    pickerConfirm(val) {
      if (val && val.value) {
        this.searchForm[this.formValue] = val.value[0][this.columnsValue];
        this.searchForm[this.formShow] = val.value[0][this.columnsLabel];
      }
      this.pickerShow = false;
    },




  },
  onLoad(e) {
    e.token && lj.setStorageSync("token",e.token);
    e.session && lj.setStorageSync("session",e.session);
    e.depId && lj.setStorageSync("depId",e.depId);
    e.userId && lj.setStorageSync("userId",e.userId);
    e.userName && lj.setStorageSync("userName",e.userName);
    e.userInfo && lj.setStorageSync('userInfo', JSON.parse(decodeURIComponent(e.userInfo)));

    // console.log(e)
    // console.log(JSON.parse(decodeURIComponent(e.userInfo)))

    this.getList();
    this.getOrgList();
  },
}
</script>

<style scoped lang="less">
.view{
  font-size: 16px;
  height: 100vh;
  overflow: hidden;
}


.search-box{
  overflow: hidden;
  position: fixed;
  z-index: 999;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: rgba(0, 0, 0, .5);
  .search-form-content{
    background: #ffffff;
    padding: 0 10px;
  }
  .btn-box{
    padding: 10px 0;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    /deep/ .u-button{
      width: 45%;
    }
  }
}
.search-box-show{
  height: calc(100vh - 44px);
  transition: all .3s;
}


.list-box{
  margin-top: 10px;
  padding: 0;
  background: #ffffff;
  height: calc(100vh - 54px);
  ///deep/ .uni-scroll-view::-webkit-scrollbar{
  //  display: none;
  //  width: 0 !important;
  //  height: 0 !important;
  //  -webkit-appearance: none;
  //  background: #e6a23c;
  //}
  .item{
    padding: 8px 10px;
    display: flex;
    flex-direction: row;
    .item-img{
      img{
        display: block;
        width: 100px;
        height: 100px;
        border-radius: 15px;
      }
    }
    .item-content{
      margin-left: 10px;
      font-size: 14px;
      color: #606266;
      display: flex;
      flex-direction: column;
    }
  }

}



.add-btn-box{
  position: fixed;
  bottom: 10%;
  right: 10%;
  .add-btn {
    width: 45px;
    height: 45px;
    color: #fff;
    position: relative;
    background: #4c81df;
    border-radius: 50%;
    box-shadow: 1px 1px 6px #4c81df;
  }
  .add-btn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    margin-left: -14px;
    margin-top: -2px;
    border-top: 4px solid;
  }
  .add-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 28px;
    margin-left: -2px;
    margin-top: -14px;
    border-left: 4px solid;
  }
}

</style>