微信小程序自定义长列表实现下拉刷新上拉加载

之前写项目遇到要用长列表由于数据量比较多所以就优先考虑小程序原生的组件

微信小程序官方提供了recycle-view长列表组件（长列表组件）但是给的实例不是很清楚，所以就自己写了一个

index.js

import request from '../../../utils/request'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    start: 1, //起始页
    pageSize: 10, //每页的数据
    dataList: [], //用于存放获取的数据
    hasdata: false //判断是有还有数据
  },

  /**
   * 生命周期函数--监听页面加载
   */
//进入页面，重新加载
  onLoad: function (options) {
    this.setData({
      start: 1,
      dataList: []
    })
    this.getListDate()
  },

  //获取用户列表
  async getListDate() {
    let res = await request('/system/type/wx/maintain/want', {
      roleId: wx.getStorageSync('roleId'),
      start: this.data.start,
      pageSize: this.data.pageSize
    })
    console.log(res);
    wx.stopPullDownRefresh(); //停止下拉刷新，与下面的监听刷新对应
    const tmpdata = res.data
    console.log(tmpdata);
    
    //把所有数据跟拿到的数据进行比较，如果所有数据比拿到的数据小，证明数据已经拿完
    if (tmpdata.length < this.data.pageSize) {
      console.log('没数据了');
      this.setData({
        dataList: this.data.dataList.concat(tmpdata),
        hasdata: false
      })
      console.log(this.data.dataList);
    } else {
      console.log('还有数据');
      this.setData({
        dataList: this.data.dataList.concat(tmpdata),
        hasdata: true,
        start: this.data.start + 1
      })

    }
  },



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // this.onLoad()
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0,
        list:wx.getStorageSync('list')
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
//当用户执行下拉函数时，把起始页设置为1，存数据的数组设置为空，这样就会实现下拉刷新功能
  onPullDownRefresh: function () {
    this.setData({
      start: 1,
      dataList: []
    })
    this.getListDate()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('到底啦');
    if (this.data.hasdata) {
      this.getListDate()
    } else {
      wx.showToast({
        title: '我也是有底线的',
        icon: 'none',
        duration: 1500
      })
    }

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

index.html

html页面可与根据需求自己写

<view class="itemContainer">
  <!-- <scroll-view scroll-y="true"> -->
  <view class="result-item" wx:for="{{dataList}}" wx:key="id">
    <navigator class="listItem"  class="text">
      <view class="name">{{item.faultName}}</view>
      <view class="time">提交时间：{{item.submitTime}}</view>
      <view class="place">故障地点：{{item.placeName}}</view>
      <view class="content">
        <van-tag type="danger" round wx:if="{{item.status==0}}">未处理</van-tag>
        <van-tag type="warning" round wx:if="{{item.status==2}}">正在处理</van-tag>
        <van-tag type="success" round wx:if="{{item.status==4}}">已处理</van-tag>
        <van-tag type="success" round wx:if="{{item.status==6}}">已评价</van-tag>
      </view>
    </navigator>
  </view>
  <!-- </scroll-view> -->
</view>

index.wxss

wxss样式也可以根据需求自己写

page {
  /* display: flex;
  flex-direction: column; */
  height: 100%;
  background:#EFF0F2;
  bottom: 60rpx;
}
.itemContainer{
  margin-bottom: 110rpx;
}


.result-item {
  /* position: absolute; */
  /* display: flex;
  flex-direction: column; */
  padding: 10rpx;
  margin: 20rpx;
  overflow: hidden;
  background:#fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

.loading {
  position: relative;
  bottom: 5rpx;
  padding: 10rpx;
  text-align: center;
}

.result-item .time{
  position: relative;
  float: right;
  top: 42rpx;
  font-size: 30rpx;
  color: green;
  left: -20rpx;
}

.result-item .place{
  position: relative;
  right: -320rpx;
  top: 10rpx;
  font-size: 30rpx;
  color: green;
}


.result-item .name{
  font-size: 44rpx;
}