uni-app微信小程序上拉加载,下拉刷新

本文介绍了如何在Vue.js项目中使用onPullDownRefresh和onReachBottom事件进行页面滚动和下拉刷新的配置,包括这两个事件的实现原理、与生命周期的关联以及在App平台上的自定义设置。
摘要由CSDN通过智能技术生成

pages.json配置官网链接
onPullDownRefresh、onReachBottom函数跟生命周期同级

data() {
	return {
		orderList:[],
		total: null, //总共多少条数据
		page: 1,
		pageSize: 10,
	}
},
onLoad() {
	
},
mounted(){
	this.getInfo()
},
methods:{
	getInfo(){
		API.getListxxx().then(res => {
			const newlist = result.contents
			this.orderList.push(...newlist)
			this.total = result.totalCount
		})
	},
	//通过按钮点击触发下拉刷新
     fresh(){
          uni.startPullDownRefresh()
      }
},
//距离底部100px时(page中配置过),触发该事件页面滚动到底部的事件(不是scroll-view滚到底)
onReachBottom() {
	let allTotal = this.page * this.pageSize
	if (allTotal < this.total) {
		//当前条数小于总条数 则增加请求页数
		this.page++;
		this.getInfo() //调用加载数据方法
	} else {
		// console.log('已加载全部数据')
	}
},
//下拉后触发的事件
onPullDownRefresh() {
	this.orderList = []
	//调用获取数据方法
	this.getInfo()
	setTimeout(() => {
		//结束下拉刷新
		uni.stopPullDownRefresh();
	}, 1000);
},

onReachBottom (上拉时到底部多少距离触发的事件) 官方语言:页面滚动到底部的事件。可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。

//pages.json
{
	"path": "pages/index/index",
	"style": {
		"enablePullDownRefresh": true,
		"onReachBottomDistance":100
	}
},

也可以每次回到页面就调用下拉刷新(看需求定)

onShow() { //没次回到页面都会调用下拉刷新
  uni.startPullDownRefresh()
},
onLoad() { //页面最开始调用
  uni.startPullDownRefresh()
},

下拉刷新

自定义配置,在 App 平台下可以自定义部分下拉刷新的配置 page->style->app-plus->pullToRefresh。
在这里插入图片描述
代码示例

{
    "pages": [
        {
            "path": "pages/index/index", //首页
            "style": {
                "app-plus": {
                    "pullToRefresh": {
                        "support": true,
                        "color": "#ff3333",
                        "style": "default",
						"offset":"260px",
						"height":"50%",
                        "contentdown": {
                            "caption": "下拉可刷新自定义文本"
                        },
                        "contentover": {
                            "caption": "释放可刷新自定义文本"
                        },
                        "contentrefresh": {
                            "caption": "正在刷新自定义文本"
                        }
                    }
                }
            }
        }
    ]
}
  • 26
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值