uni-app 滑动翻页

<template>
  <view class="contain-box">
    <u-navbar
      :title="title"
      :is-back="true"
      back-icon-color="#fff"
      :background="background"
      :border-bottom="false"
      title-color="#fff"
    >
    </u-navbar>
    <view class="content">
      <view class="searchk">
        <u-search
          placeholder="请输入手机号查询(必填)"
          v-model="formdata.visitMoblie"
          shape="square"
          bg-color="#fff"
          :clearabled="true"
          @search="search()"
          @clickIcon="search()"
          @clear="sclear()"
          :show-action="true"
          action-text="筛选"
        >
        </u-search>
      </view>
      <view class="tabs">
        <u-tabs
          :list="list"
          :is-scroll="false"
          :current="current"
          @change="change"
        ></u-tabs>
      </view>
    </view>
    <!-- 列表 -->
    <view class="list-box">
      <view
        v-for="item in indexList"
        class="list-box-item"
        v-if="indexList.length > 0"
        @click="goDetail(item)"
      >
        <view class="item-title">
          <h4>{{ item.intervieweeName }}的访客单</h4>
          <span>{{ STATUS[item.status] }}</span>
        </view>
        <view class="item-cont">
          <p>
            <u-icon name="account-fill" color="#2979ff" size="28"></u-icon>
            <span>预约姓名:</span>{{ item.visitName }}({{ item.visitMoblie }})
          </p>
          <p>
            <u-icon name="clock" color="#2979ff" size="28"></u-icon>
            <span>预约时间:</span>{{ item.visitTime }}
          </p>
          <p>
            <u-icon name="file-text-fill" color="#2979ff" size="28"></u-icon>
            <span>预约备注:</span>{{ item.visitReason }}
          </p>
        </view>
      </view>
      <view class="no-data" v-if="indexList.length <= 0"> 没有数据</view>
    </view>
  </view>
</template>

<script>
import { getListByWay } from "@/api/visitor.js";
import { getUrlParamscode } from "@/api/request.js";

export default {
  data() {
    return {
      title: "我的预约",
      background: {
        backgroundColor: "#558eff",
      },
      current: 0,
      list: [
        {
          name: "待审批",
        },
        {
          name: "已完成",
        },
      ],
      indexList: [],
      formdata: {
        visitOpenId: uni.getStorageSync("_USER_OPENID"),
        visitWay: 1, //visitWay1自己预约 2来宾邀约
        pageNo: 1,
        pageSize: 10,
        type: 1, //（1待 2已完成 ）
        visitMoblie: "",
      },
      STATUS: {
        //（1待审批 2已取消 3不通过 4已通过  5已失效）
        1: "待审批",
        2: "已取消",
        3: "不通过",
        4: "已通过",
        5: "已失效",
        6: "处理中",
      },
    };
  },
  onl oad(e) {
    this.indexList = [];
    this._list();
  },
  //上拉加载
  onReachBottom() {
    this.formdata.pageNo = this.formdata.pageNo + 1;
    this._list();
  },
  //下拉刷新
  onPullDownRefresh() {
    //刷新后的效果
    this.formdata.pageNo = 1;
    this.indexList = [];
    this._list();
  },
  methods: {
    change(index) {
      this.current = index;
      this.indexList = [];
      if (index == 1) {
        this.formdata.type = 2;
      } else {
        this.formdata.type = 1;
      }
      this.sclear();
    },
    sclear() {
      this.indexList = [];
      this.formdata.pageNo = 1;
      this.formdata.pageSize = 10;
      this._list();
    },
    search() {
      this._list();
    },

    //加载列表
    _list() {
      getListByWay(this.formdata).then((res) => {
        if (res.data.code == "00000") {
          if (
            this.formdata.pageNo >
            Math.ceil(res.data.data.total / this.formdata.pageSize)
          ) {
            uni.showToast({
              title: "没有更多了",
              icon: "none",
              duration: 1000,
              mask: true,
            });
            uni.stopPullDownRefresh(); //刷新数据之后停止刷新效果
            return false;
          }
          this.indexList = this.indexList.concat(res.data.data.datas);
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.desc,
          });
        }
        uni.stopPullDownRefresh(); //刷新数据之后停止刷新效果
      });
    },
    //跳转详情
    goDetail(item) {
      //listType 1我的预约2访客审批3邀约
      uni.navigateTo({
        url:
          "/pages/index/compoment/detail?items=" +
          JSON.stringify(item) +
          "&listType=" +
          1,
      });
    },
  },
};
</script>

<style lang="scss">
.contain-box {
  height: 100vh;
  background-color: #f5f7fd;
  .content {
    width: 100%;
    padding: 30rpx 20rpx;
    background-color: #f5f7fd;

    .searchk {
      margin-bottom: 20rpx;

      /deep/.u-action {
        display: none;
      }
    }
  }
  .list-box {
    background-color: #f5f7fd;
    padding: 0 10px 10px 10px;
    .list-box-item {
      background: #fff;
      margin-bottom: 12px;
      display: flex;
      width: 100%;
      flex-flow: column;
      .item-title {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 0 10px;
        margin-top: 10px;
        h4 {
          // font-size: 16px;
          display: flex;
          width: 80%;
          text-align: justify;
        }
        span {
          color: #2674d5;
        }
      }
      .item-cont {
        padding: 10px;
        p {
          line-height: 26px;
          span {
            padding-left: 6px;
            text-align: justify;
            width: 70px;
            display: inline-block;
            text-align-last: justify;
            vertical-align: top;
            margin-right: 2px;
          }
          // span:after {
          //   display: inline-block;
          //   content: "";
          //   overflow: hidden;
          //   width: 100%;
          //   height: 0;
          // }
        }
      }
    }
  }
}
</style>

//我的预约
        {
            "path": "pages/index/compoment/visitor",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": true,
                "navigationStyle": "custom"
            }
        },