uni-app下拉刷新触底加载更多

首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里

两个事件

//下拉刷新
onPullDownRefresh() {console.log('下拉刷新');},//触底加载更多onReachBottom(e) {console.log('触底加载更多');}

完整dome:

<template><view>个人中心<view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view><view>请求返回:{{ res }}</view></view>
</template><script>
var aThat, _that;
export default {data: function() {return {res: '',page: 1};},onLoad: function() {_that = this;},methods: {onPullDownRefresh() {console.log('下拉刷新', _that.page);uni.request({url: 'http://localhost/myUniApp/php/onPullDownRefresh.php', //仅为示例，并非真实接口地址。data: {rawData: _that.page},method: 'GET', //请求方式header: {'custom-header': 'application/json' //自定义请求头信息},success: res => {console.log('刷新返回', res.data);(_that.res = 1), (_that.page = 1);uni.stopPullDownRefresh();}});},onReachBottom(e) {console.log('触底加载更多', _that.page);uni.request({url: 'http://localhost/myUniApp/php/onPullDownRefresh.php', //仅为示例，并非真实接口地址。data: {rawData: _that.page},method: 'GET', //请求方式header: {'custom-header': 'application/json' //自定义请求头信息},success: res => {console.log('加载更多返回', res.data);(_that.res = res.data), (_that.page = _that.page + 1);uni.stopPullDownRefresh();}});}}
};
</script><style></style>

//dome中的测试接口php文件 onPullDownRefresh.php

<?phpheader("Content-Type:text/html; charset=utf-8");//解决中文乱码header("Access-Control-Allow-Origin:application/json"); //解决跨域header('Access-Control-Allow-Methods:get');// 响应类型mysql_connect('localhost', 'root', 'root');//链接数据库默认账号密码都为rootmysql_set_charset('utf-8');//解决中文乱码问题mysql_select_db('text'); //选择数据库// 接收前端传过来的参数$rawData =$_GET["rawData"];echo $rawData //把接受到的参数返回到前端
?>

注意：接口用之前一定要先开启phpStudy不然接口相当于没用看看就好

官方下拉刷新：https://uniapp.dcloud.io/api/ui/pulldown?id=onpulldownrefresh
触底加载更多》》》生命周期函数：https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F

uni-app下拉刷新触底加载更多相关推荐

recyclerview的数据刷新（下拉刷新和自动加载更多）以及添加提示语（例如：“数据已加载完毕”）
下拉加载更多的核心是SwipeRefreshLayout搭配Recyclerview进行使用.布局为 <android.support.v4.widget.SwipeRefreshLayout ...
微信小程序04---头像上传、瀑布流、下拉刷新、触底加载更多、分包
目录一.头像上传 1.选择图片 wx.chooseImage() 2.上传文件 wx.uploadFile() 二.瀑布流+下拉刷新+触底加载三.分包加载什么是分包为什么要使用分包如 ...
（仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录一.点击过的新闻列表文字变灰效果图实现思路导入ormlite数据库类依赖利用ormlite创建数据库和表创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
【微信小程序】实现下拉刷新和上拉触底加载更多数据的页面事件
1.下拉刷新事件 1. 什么是下拉刷新下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为 2. 启用下拉刷新启用下拉刷新有两种方式: ① 全局开启下拉刷新 ...
Vue 下拉刷新及无限加载组件 - 有你便是晴天 - 博客园
原文 https://github.com/wangdahoo/vue-scroller 主题 Vue.js Vue Scroller Vue Scroller is a foundational ...
小程序下拉刷新上拉触底加载数据
1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数,我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数,其中就会生成「onPullDownRefres ...
lin-ui实现瀑布流的触底加载
触底加载效果实现思路触底加载更多的细节: 触底: 监测触底事件在触底之后执行一系列动作加载数据: 在触底后需要向服务器请求数据,如果已经请求到了所有数据,应该不再发送请求. 加载状态: 请求数据 ...
Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容环境测试数据项目结构演示参考资料本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
iOS 类似亲宝宝app下拉刷新动画效果
iOS 类似亲宝宝app下拉刷新动画效果,最近看了下这种效果,感觉有点意思.于是就实现了一下. 方案一采用两个背景View1.View2,三个球ball1,ball2,ball3,将ball1,ba ...

uni-app下拉刷新触底加载更多

uni-app下拉刷新触底加载更多相关推荐

最新文章

热门文章