微信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"
}