mpvue小程序上拉加载更多 分页

我也是网上找的代码 然后自己修改成自己的吧 其实网上也挺多的。
首先是css文件 我的页面是这样的

<div :class="[ isItemDtos ? 'recordsNoe':'records']">
    <ul>
      <li class="table"
        v-for="(item, index) in app_list"
        :key="index"
        @click="todetail(item.id)"
        v-if="item.status==1">

        <div class="title">
          <img src="../../../static/images/icon1.png"
            alt="">
          <span>{{item.conSource}}</span>
        </div>
        <div class="category-pl">
          {{item.title}}

        </div>
        <div class="category">
          <img :src="basesUrl+'/api/open/file/download/'+item.proPicture"
            alt="">
        </div>
        <div class="category1">
          <img src="../../../static/images/look.png"
            alt="">
          <span>{{item.readCount}} 人看过</span>
        </div>

      </li>
    </ul>

  </div>

然后是js中定义的参数

<script>
export default {
  data() {
    return {
      imgUrl: "",
      Bol: "",
      io: "",
      isshow: false,
      isItemDtos: true,
      tracingList: [],
      basesUrl: "",
      app_list: {}, // 列表数据
      page: 1, // 当前页数
      total_page: 0 // 总页数
    };
  },
    onShow: function() {
    this.page = 1;
    this.getList();
  },
    // 下拉刷新事件
  onPullDownRefresh() {
    // 初始化页码
    this.page = 1;
    this.getList();
  },
  // 上拉触底事件
  onReachBottom() {
    if (this.page > this.total_page) {
    } else {
      // 显示加载图标
      wx.showLoading({
        title: "玩命加载中"
      });
      // 下一页
      this.page = this.page + 1;
      this.getList();
    }
  },
    methods: {
        // 获取数据方法
    getList() {
      request({
        url: "/open/trace/item/search", //
        data: {
          pageSize: 10,
          page: this.page // 传递页码
        },
        method: "POST",
        success: res => {
          console.log(res);
          //  this.tracingList = res.data.data.itemDtos;
          if (res.data.code == 200) {
            if (res.data.data.total == 0) {
              this.isItemDtos = true;
            } else {
              this.isItemDtos = false;
            }
            // console.log("200",this.isItemDtos)
            if (res.data.data.itemDtos.length == 0) {
              wx.showModal({
                title: "提示",
                showCancel: false,
                content: "没有更多数据！",
                success(res) {
                  if (res.confirm) {
                  } else if (res.cancel) {
                  }
                }
              });
            } else {
            }
            // 关闭下拉刷新动画
            wx.stopPullDownRefresh();
            // 返回的数据
            const data = res.data.data;
            // 数据追加  data.list为返回的数据列表
            if (this.page > 1) {
              // 数据追加
              this.app_list.push(...data.itemDtos);

              // ...data.itemDtos
              // 等同于
              // for (var i = 0; i < data.list.length; i++) {
              //     this.art_list.push(data['list'][i])
              // }
            } else {
              // 数据
              this.app_list = data.itemDtos;
            }
            // 总页数
            this.total_page = data.total_page;
            // console.log("this.isItemDtos:",this.isItemDtos)
          } else {
            this.isItemDtos = true;
            wx.showModal({
              title: "提示",
              content: res.data.message,
              showCancel: false,
              success: res => {
                if (res.confirm) {
                  wx.switchTab({
                    url: "/pages/me/main"
                  });
                } else if (res.cancel) {
                }
              }
            });
          }
        },
        fail: fails => {
          this.isItemDtos = true;
        }
      });
    }
    }
}
</script>

接下来是style

<style >
.records {
  background: #efeff4;
  /* background: red; */
  padding-top: 1rpx;
  padding-bottom: 120rpx;
}
.recordsNoe {
  background: #efeff4;
  padding-top: 1rpx;
  /* padding-bottom: 120rpx; */
}

.reminder {
  font-size: 28rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-decoration: underline;
  color: rgba(57, 172, 95, 1);
  /* padding-top: 29rpx; */
  margin-left: 29rpx;
}
.ParseEditor {
  /* text-indent: 2em; */
  background: pink;
}
.ParseEditor:before {
  /* content: "台词：";
  width: 100px;
  height: 100px;
  background: purple; */
}

.table {
  /* height: 600rpx; */
  background: rgba(255, 255, 255, 1);
  margin-top: 20rpx;
  /* margin-top: 30rpx; */
}

.title {
  padding-left: 20rpx;
  padding-top: 30rpx;
  margin-bottom: 30rpx;
  /* margin-left: 30rpx; */
}
.title img {
  width: 42rpx;
  height: 42rpx;
  vertical-align: middle;
}
.title span {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  margin-left: 12rpx;
  vertical-align: middle;
  color: rgba(117, 117, 117, 1);
}
.category {
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.category img {
  text-align: center;
  height: 500rpx;
  border-radius: 3%;
}
.category1 {
  margin-top: 29rpx;
  margin-left: 20rpx;
  padding-bottom: 20rpx;
  /* display: flex;
  justify-content: flex-start; */
}
.category1 img {
  margin-left: 20rpx;
  vertical-align: middle;
  width: 32rpx;
  height: 32rpx;
}
.category1 span {
  margin-left: 20rpx;
}

.category-head {
  display: flex;
  justify-content: space-around;
  padding-top: 40rpx;
}

.category-pl {
  padding-left: 60rpx;
  padding-right: 60rpx;
  margin-top: 20rpx;
  margin-right: 20rpx;
  font-size: 30rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 600;
  /* color: rgba(51, 51, 51, 1); */
  color: #6f6f6f;
  word-wrap: break-word; /* 使view在输入字母或者数字时自动换行 */
}

.category-content {
  width: 443rpx;
  height: 70rpx;
  margin-left: -60rpx;
  background: rgba(255, 255, 255, 1);
  border: 1rpx solid rgba(229, 229, 229, 1);
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 70rpx;
}

.category-content-look {
  width: 443rpx;
  height: 70rpx;
  margin-left: -60rpx;
  background: rgba(255, 255, 255, 1);
  border: 1rpx solid rgba(229, 229, 229, 1);
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  line-height: 70rpx;
  color: rgba(57, 172, 95, 1);
}