uniapp 下拉刷新

uniapp 下拉刷新(全局&单页面)

全局设置
在pages.json文件的globalStyle对象中开启enablePullDownRefresh属性
在这里插入图片描述

单页面
在pages.json文件中的pages数组中找到对应的页面,在对应页面的style属性中开启enablePullDownRefresh属性
在这里插入图片描述
下拉刷新设置为true后,就可以在指定页面下拉刷新了

一、指定页面添加生命周期函数
使用下拉刷新的时候,肯定得监听用户的下拉动作,所以就得在页面中添加 onPullDownRefresh生命周期函数,然后在onPullDownRefresh生命周期函数中实现特定功能;

二、用uniapp自带方法终止上拉刷新
特定功能完成后,使用uniapp自带的方法,uni.stopPullDownRefresh(),来终止刷新,否则则一直刷新

onPullDownRefresh

在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。 需要在
pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh。
当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

uni.stopPullDownRefresh()

uni.startPullDownRefresh(OBJECT)开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
下拉刷新是指用户在页面顶部向下滑动,触发刷新操作,常用于列表数据的更新。在uniApp中,可以使用自带的下拉刷新组件来实现下拉刷新功能。具体步骤如下: 1. 在需要添加下拉刷新功能的页面的`<template>`标签中添加下拉刷新组件代码: ```html <scroll-view class="content" scroll-y="true" enable-back-to-top> <!-- 下拉刷新组件 --> <view class="refresh" slot="refresher"> <text class="refresh-text">{{refreshText}}</text> <loading class="refresh-icon" :show="refreshing"></loading> </view> <!-- 列表数据 --> <view class="list" v-for="(item, index) in list" :key="index">{{item}}</view> </scroll-view> ``` 2. 在`<script>`标签中添加下拉刷新相关的数据和方法: ```javascript export default { data() { return { list: [], // 列表数据 refreshing: false, // 是否正在刷新 refreshText: '下拉刷新', // 刷新提示文本 } }, methods: { // 下拉刷新事件 onPullDownRefresh() { this.refreshText = '正在刷新...' this.refreshing = true // 模拟异步请求数据 setTimeout(() => { this.list = ['数据1', '数据2', '数据3'] this.refreshText = '下拉刷新' this.refreshing = false uni.stopPullDownRefresh() // 停止下拉刷新 }, 2000) }, }, } ``` 3. 在`<style>`标签中添加下拉刷新相关的样式: ```css .refresh { display: flex; justify-content: center; align-items: center; height: 80rpx; font-size: 28rpx; color: #999; } .refresh-text { margin-left: 20rpx; } .refresh-icon { width: 40rpx; height: 40rpx; margin-left: 10rpx; } ``` 在上述代码中,我们使用了`scroll-view`组件来实现滚动列表,并在其中添加了下拉刷新组件。当用户下拉列表时,会触发`onPullDownRefresh`方法,我们可以在该方法中模拟异步请求数据,并在请求完成后调用`uni.stopPullDownRefresh()`方法来停止下拉刷新
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值