微信小程序分页上滑加载

微信上滑加载有一个事件  

/**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
      // 显示加载图标
      wx.showLoading({
        title: '玩命加载中',
      })
      // this.onloadrecordsList()
      this.getMore1()
    },

在页面一进来的时候   onLoad()生命周期函数中  

加载 this.getMore1()方法 

这是定义的参数

return {
        imgUrl: "",
        Bol: "",
        page: 1,
        isshow: false,
        tracingList: [],
      };

getMore1() {
        var page = this.page; //页码
        // 需求列表
        request({
          url: "/policyUser/queryPolicyInfoList", //
          data: {
            page: page,
            limit: 5

          },
          method: "POST",
          success: (res) => {
            console.log(res)
            if (res.data.code == 0) {
              // if (res.data.data.policyInfoListVOList.length == 0 && this.tracingList != '') {
                if (res.data.data.policyInfoListVOList.length == 0 ) {
                wx.showToast({
                  title: '没有更多数据！',
                  icon: 'none',
                  duration: 2000
                })
              }
              // if (res.data.data.policyInfoListVOList.length == 0) {
              //   wx.showToast({
              //     title: '溯源记录为空',
              //     icon: 'success',
              //     duration: 2000
              //   })
              // }


              if (res.data.data.flag) {
                this.isshow = false
              } else {
                this.isshow = true
              }
              var arr = this.tracingList //旧的数组
              for (var i = 0; i < res.data.data.policyInfoListVOList.length; i++) {
                arr.push(res.data.data.policyInfoListVOList[i])
              }
              this.tracingList = arr
              page++;
              this.page = page

            } else {
              wx.showModal({
                title: "错误",
                content: res.data.msg,
                showCancel: false
              });
            }
          }

        });
      },

 

 

整个vue文件的代码  自己拿去研究吧  很简单 其实

<template>
  <div class="records">
    <div></div>
    <p class="reminder" v-if="isshow" @click="addaccount">填写账户信息，获取保险赔付>></p>
    <ul>
      <li class="table" v-for="(item, index) in tracingList" :key="index">
        <div class="category-head">
          <p class="category-pl">品类</p>
          <p class="category-content">{{item.varietyName}}</p>
        </div>
        <div class="category">
          <p class="category-pl">时间</p>
          <p class="category-content">{{item.lastScanTime}}</p>
        </div>
        <div class="category">
          <p class="category-pl">溯源码</p>
          <!-- item.boxCode -->
          <p class="category-content">{{item.labSpecification+item.boxCode}}</p>
        </div>
        <div class="category">
          <p class="category-pl">操作</p>
          <p class="category-content-look" @click="look(item.labSpecification+item.boxCode)">查看</p>
        </div>
        <img :src="'/static/images/' + item.policyStatus + '.png'">

      </li>
    </ul>

  </div>
</template>

<script>
  import {
    request
  } from "@/utils/index.js";
  import imgUrla from '../../../static/images/1.png'
  import imgUrlb from '../../../static/images/2.png'
  export default {
    data() {
      return {
        imgUrl: "",
        Bol: "",
        page: 1,
        isshow: false,
        tracingList: [],
      };
    },
    watch: {

    },
    mounted() {

      wx.setNavigationBarTitle({
        title: '溯源记录'
      })
      // this.onloadrecordsList()
      // this.getMore1()

    },

    onLoad(options) {

    },
    onShow: function () {
      this.page=1
      this.tracingList=[]
      this.getMore1()
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
      // 显示加载图标
      wx.showLoading({
        title: '玩命加载中',
      })
      // this.onloadrecordsList()
      this.getMore1()
    },

    watch: {},

    methods: {
      getMore1() {
        var page = this.page; //页码
        // 需求列表
        request({
          url: "/policyUser/queryPolicyInfoList", //
          data: {
            page: page,
            limit: 5

          },
          method: "POST",
          success: (res) => {
            console.log(res)
            if (res.data.code == 0) {
              // if (res.data.data.policyInfoListVOList.length == 0 && this.tracingList != '') {
                if (res.data.data.policyInfoListVOList.length == 0 ) {
                wx.showToast({
                  title: '没有更多数据！',
                  icon: 'none',
                  duration: 2000
                })
              }
              // if (res.data.data.policyInfoListVOList.length == 0) {
              //   wx.showToast({
              //     title: '溯源记录为空',
              //     icon: 'success',
              //     duration: 2000
              //   })
              // }


              if (res.data.data.flag) {
                this.isshow = false
              } else {
                this.isshow = true
              }
              var arr = this.tracingList //旧的数组
              for (var i = 0; i < res.data.data.policyInfoListVOList.length; i++) {
                arr.push(res.data.data.policyInfoListVOList[i])
              }
              this.tracingList = arr
              page++;
              this.page = page

            } else {
              wx.showModal({
                title: "错误",
                content: res.data.msg,
                showCancel: false
              });
            }
          }

        });
      },
      addaccount() {
        wx.navigateTo({
          url: '/pages/bindingcard/main'
        });
      },
      look(data) {
        // wx.navigateTo({
        //   url: "/pages/traceabilityrecordsinfo/main?boxCode=" + data
        // })
        wx.navigateTo({
          url: '/pages/webview/main?boxcode=' + data + "&tab=1"
        });

      },

    },

    created() {}
  };

</script>
<style>
  .records {
    background: #EFEFF4;
    /* height: 100vh; */
    padding-top: 20rpx;
    min-height: 1200rpx

  }

  .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;
  }

  .table {
    width: 710rpx;
    height: 363rpx;
    margin: 0 auto;
    /* padding-top: 20rpx; */
    background: rgba(255, 255, 255, 1);
    position: relative;
    margin-top: 20rpx;
  }

  .category {
    display: flex;
    justify-content: space-around;
    margin-top: -2rpx;

  }

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

  .category-pl {
    width: 204rpx;
    height: 70rpx;
    background: rgba(249, 249, 249, 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 {
    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);
  }

  .table img {
    width: 123rpx;
    height: 114rpx;
    position: absolute;
    top: 0;
    right: 0;
  }

</style>