uniapp使用自带【刷新方法】与使用【scroll-view】实现下拉刷新上拉加载

阅读本书更多章节>>>>

前言：uniapp自带下拉刷新，上拉加载功能基本可以满足刷新需求，但是顶部有状态栏的页面就得进行特殊处理，使用scroll-view解决，状态栏会连带被下拉问题

 

1、uniapp自带下拉刷新、上拉加载

在page.json中对应页面路由设置【enablePullDownRefresh】值为true（开启下拉刷新）

代码：

//下拉刷新触发方法(和onLoad同级)onPullDownRefresh () {this.params.pageNum = 1    this.PostCollectList()  //获取数据},//上拉加载触发方法onReachBottom() {if(this.hasNextPage){    //判断是否还有数据需要加载this.params.pageNum = this.params.pageNum+1this.loading.status = "loadingText"this.PostCollectList()    //获取数据}else{this.loading.status = "nomoreText"}},onLoad() {},methods: {    PostCollectList() {let params = {...this.params    }    PostCollectList(params).then(res => {    let data = res.data.data || []    this.list = this.list.concat(data)    this.total = res.data.total    this.hasNextPage = res.data.hasNextPage    uni.stopPullDownRefresh()    //结束下拉刷新        if(this.hasNextPage){        this.loading.status = "loadmoreText"    }else{    this.loading.status = "nomoreText"    }    })    },}

2、使用scroll-view实现刷新，官网地址：scroll-view | 微信开放文档

 需要注意：

官网中方法有带【bind】,使用@的话需要将bing去掉（@refresherpulling="refresherpulling"）或者（bindrefresherpulling="bindrefresherpulling"）

使用scroll-view必须设置一个高度

 代码：

<template>    <view>        <scroll-view             scroll-y="true"    //设置纵向滚动            :style="{height: scprllHeight + 'rpx'}"     //设置高度            :refresher-threshold="100"    //设置下拉范围        @refresherrefresh="refresherrefreshFun"     //下拉刷新被触发            @refresherpulling="refresherpullingFun"      //正在下拉执行刷新操作               :refresher-triggered="isRefresher"    //设置是否刷新变量        @scrolltolower="scrolltolowerFun"    //滑动底部触发事件        refresher-enabled="true"             //开启自定义下拉刷新            refresher-default-style="none">        <view class="content-box">        //需要滚动的内容        </view>        </scroll-view>    </view></template>data() {    return {        isRefresher: false, //下拉刷新状态    }},methods: {    //请求数据    PostCollectList() {        //数据请求返回后从设刷新状态值        this.isRefresher= true    },    // 下拉刷新被触发refresherrefreshFun() {this.list = []this.params.pageNum = 1this.PostCollectList()},// 下拉刷新触发refresherpullingFun() {this.isRefresher= true},//上拉加载，页面滑动到底部加载分页数据scrolltolowerFun() {if(this.hasNextPage){this.params.pageNum = this.params.pageNum+1this.loading.status = "loadingText"this.PostCollectList()}else{this.loading.status = "nomoreText"}}}

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-03-31/151772.html，文章来源：网络cs，作者：付梓，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！