微信scroll-view小程序实现上拉加载下拉刷新

在使用微信小程序时避免不了查询列表实现分页功能，在这里分享下使用croll-view实现上拉加载下拉刷新功能,如有不足请指出

• 创建commonPagination组件

  • wxml文件

    <scroll-view class="scroll" style="{{style}}" scroll-top="{{scrollTop}}" scroll-y="true" refresher-enabled="{{true}}" bindrefresherrefresh="onPullDown" refresher-triggered="{{triggered}}" lower-threshold="{{50}}" bindscrolltolower="onPullUp"> <slot></slot> <view class="loadmore" hidden="{{!isLoadMoreing}}"> <view class="loadmore-icon"></view> <view class="loadmore-tips">正在加载</view> </view> <view wx:if="{{isNoMore}}" class="bot-line">我是有底线的</view> </scroll-view>

• wxss文件

  .scroll {
  width: 100%;
  height: 100%;

  }
  .scroll ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
  }

  .loadmore {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  }

  .loadmore-tips {
  vertical-align: middle;
  }

  .loadmore-icon {
  margin: 0 5px;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
  }

  .bot-line {
  color: #333;
  height: 100rpx;
  line-height: 100rpx;
  white-space: nowrap;
  text-align: center;
  }
  .bot-line::before,
  .bot-line::after {
  content: "";
  display: inline-block;
  width: 24vw;
  height: 1rpx;
  background-color: #ddd;
  vertical-align: super;
  margin: 0 36rpx;

  }

• js文件

  Component({

    /**
     * 组件的属性列表
     */
  
    properties: {
        style: {
            type: String,
            value: ''
        },
  
        _freshing: {
            type: Boolean,
            value: false
        },
        _loadMoreing: {
            type: Boolean,
            value: false
        },
        isLoadMoreing: {
            type: Boolean,
            value: false,
            observer: function (newVal) { 
                console.log(newVal)
            }
        },
        isNoMore: {
            type: Boolean,
            value: false
        },
        triggered: {
            type: Boolean,
            value: false
        }
  
    },
  
    /**
     * 组件的初始数据
     */
  
    data: {
        scrollTop: 0,
    },
  
    /**
     * 组件的方法列表
     */
  
    methods: {
        // 下拉刷新
        onPullDown(e) {
            this.triggerEvent('PullDown')
        },
  
        // 上拉加载
        onPullUp(e) {
            this.triggerEvent('PullUp')
        },
    }
  

  })

• json文件

  {
  "usingComponents": {},
  "component": true
  }

• 页面引用

  • wxml文件

    <view class="box history-box"> <pagination bind:PullUp="handlePullUp" bind:PullDown="handlePullDown" _freshing="{{_freshing}}" _loadMoreing="{{_loadMoreing}}" isNoMore="{{isNoMore}}" triggered="{{triggered}}" isLoadMoreing="{{isLoadMoreing}}"> <view class="history-content-box" wx:for="{{historyList}}" wx:key="unique"> <view>{{item.name}}</view> </view> </pagination> </view>

• wxss文件

  .box {
  height: 70vh;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(240, 240, 240, 0.5);
  backdrop-filter: blur(27.1828px);
  border-radius: 40rpx 40rpx 0 0;
  padding: 20rpx 50rpx;
  box-sizing: border-box;
  }
  .history-box {
  padding-top: 60rpx;
  backdrop-filter: inherit;
  background: rgba(215, 227, 235, 1);
  }
  .history-content-box {
  width: 100%;
  height: fit-content;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-sizing: border-box;
  margin-bottom: 30rpx;
  }

• js文件

  // index.js
  // 获取应用实例
  const app = getApp()
  import {
  request
  } from '../../utils/request'

  Page({
  data: {

    _freshing: false,
    _loadMoreing: false,
    isNoMore: false,
    triggered: false,
    isLoadMoreing: false,
    pageIndex: 1,
    pageSize: 10,
    historyList:[]
  },
  
  onLoad(option) {
    
    this.setData({
      pageIndex: 1,
      historyList:[]
    })
    this.getList()
  },
  handlePullUp() {
  
    if (this.data._loadMoreing || this.data.isNoMore) return;
    
    this.setData({
      isLoadMoreing: true,
      isNoMore: false,
      pageIndex: this.data.pageIndex + 1,
      _loadMoreing: true
      // pageIndex: res.length == 0 ? this.data.pageIndex : this.data.pageIndex + 1
    })
    this.getList('up')
    
  },
  handlePullDown() {
    if (this.data._freshing) return;
    this._freshing = true
    this.setData({
      _freshing: true,
      pageIndex: 1,
      isNoMore: false,
      triggered: true
    })
    this.getList('down')
   
  },
  
  
  getList(type) {
    let paramsData = {
      pageIndex: this.data.pageIndex,
      pageSize: 10
    }
    if(this.data.pageIndex == 1) {
      this.setData({
        historyList: []
      })
    }
    request("url", paramsData, "get").then(res => {
      console.log(res,'klklkl')
      let recordList = res.recordList || []
      
      let list = this.data.historyList
      this.setData({
        historyList: list.concat(recordList)
      })
      console.log(this.data.historyList)
      if(type=='up') {
        this.setData({
          isLoadMoreing: false,
          _loadMoreing: false
        })
      } else {
        this.setData({
          _freshing: false,
          pageIndex: 1,
          isNoMore: false,
          triggered: false
        })
      }
      if(this.data.pageIndex == res.pageCount) {
        this.setData({
          isNoMore: true
        })
      } else {
        this.setData({
          isNoMore: false
        })
      }
    }).catch(error => {
      if (error === 401) {
        app.initLogin()
      }
    })
  }
  

  })

• json文件

  {
  "usingComponents": {
  "pagination":"/components/commonPagination/index"
  },
  "navigationStyle": "custom"
  }