uni-app结合view实现小程序的scroll-view的上拉加载和下拉刷新功能

使用订单列表为实例：实现uni-app结合uview实现小程序的scroll-view的上拉加载和下拉刷新功能

<view class="order-list">
        <!--头部-->
        <u-navbar :is-fixed="true" :is-back="true" title="订单列表"></u-navbar>
        <!--导航栏-->
        <u-tabs-swiper class="nav-tab" ref="uTabs" :list="tabsTag" :current="current" @change="tabsChange"
                       :is-scroll="false" active-color="#FE2742" inactive-color="#606266"
                       swiperWidth="750"></u-tabs-swiper>

        <view class="content" :style="{'padding-top': `${$tools.getUNavbarHeight()}px`}">
            <scroll-view class="scroll-box" scroll-y :refresher-enabled="true" :refresher-triggered="triggered"
                         :refresher-threshold="100" refresher-background="white" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
                         @scrolltolower="onreachBottom">
                <view class="list-body">

                    // 列表内容                    

                    <!--为空状态-->
                    <u-empty :show="inited && orders.length===0" text="暂时没有订单～" mode="list" margin-top="240"></u-empty>
                </view>
                <!--加载更多-->
                <u-loadmore v-if="inited && orders.length > 0" :status="listStatus" margin-top="30" margin-bottom="30"/>

            </scroll-view>
        </view>

    </view>

script：

<script>
    export default {
        data() {
            return {
                tabsTag: [
                    {
                        id: '-1',
                        name: '全部'
                    },
                    {
                        id: '0',
                        name: '待付款'
                    },
                    {
                        id: '1',
                        name: '待发货'
                    },
                    {
                        id: '2',
                        name: '待收货'
                    },
                    {
                        id: '4',
                        name: '已完成'
                    }
                ], // 状态栏
                // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
                current: 0, // tabs组件的current值，表示当前活动的tab选项
                listStatus: 'loadmore', // 加载状态
                allLoaded: false, // 是否全部加载
                page: 1, // 页码
                totalPage: 1, // 总数
                inited: false, // 暂无订单数据状态
                isPageTurn: false, // 上拉加载状态
                triggered: false, // 下拉刷新
            };
        },
        onLoad(options) {
            this.current = options.type
        },
        onShow() {
            this.page = 1
            this.getList()
        },
        methods: {
            /** 获取订单列表*/
            async getList() {
                let self = this
                let res = await getOrderList(self.page, self.$store.state.UserToken, self.tabsTag[self.current].id, self.isPageTurn).catch(_ => null)
                self.triggered = false // 关闭下拉刷新
                if (res && res.code === 200 && res.data != null) {
                    /** 预售单统计*/
                    self.pre_sale_count = res.data.pre_sale_count || 0
                    /** 判断是否是上拉加载操作*/
                    if (self.isPageTurn) {
                        self.isPageTurn = false
                        self.orders = self.orders.concat(res.data.orders)
                    } else {
                        self.orders = res.data.orders
                    }

                    self.totalPage = Math.ceil(res.data.total / res.data.pageSize)
                    self.$nextTick(_ => {
                        if (parseInt(self.page) >= parseInt(self.totalPage)) {
                            self.allLoaded = true
                            self.listStatus = 'nomore'
                        } else {
                            self.allLoaded = false
                            self.listStatus = 'loadmore'
                        }
                    })

                }
                self.inited = true
            },
            /** tabs通知swiper切换 */
            tabsChange(index) {
                this.current = index
                if (this.inited) {
                    this.isPageTurn = false
                    this.inited = false
                    this.page = 1
                    this.totalPage = 1
                    this.allLoaded = false
                    this.orders = []
                    this.listStatus = 'loadmore'
                    this.getList()
                }
            },
            /** 下拉刷新 */
            onRefresh() {
              this.isPageTurn = false
              this.inited = false
              this.page = 1
              this.totalPage = 1
              this.triggered = true
              this.getList()
            },
            /** scroll-view到底部加载更多 */
            onreachBottom() {
                if (this.inited) {
                    this.isPageTurn = true
                    this.page += 1
                    this.listStatus = 'loading'
                    this.getList()
                }
            },
            /** 重置下拉刷新*/
            onRestore() {
                this.triggered = 'restore' // 重置
                this.triggered = false
            }
        }
    };
</script>

c s s

.order-list, {
  width: 100%;
  height: 100%;

  .nav-tab {
    width: 100%;
    position: fixed;
    z-index: 9;
  }

  .content{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    .scroll-box {
      width: 100%;
      height: 100%;
      padding-top: 80rpx;
      box-sizing: border-box;
      .list-body {
        width: 100%;
        height: auto;
        padding: 30rpx 30rpx 0;
        box-sizing: border-box;
        overflow-y: scroll;
        
      }


    }
  }


}