#uni-app 开发项目实战# 下拉刷新，上拉加载数据

一、下拉刷新的思路：

第一步：

在pages.json里面，

找到想要设置下拉刷新的页面，

进行配置加入-----"enablePullDownRefresh":true

"enablePullDownRefresh":true

第二步：

2种方式进行下拉刷新(页面直接刷新法&点击标签法)

页面直接刷新法：

（1）先写出一些数据内容
例如：

<template><view v-for="(item,index) in uplist" class="testbox">{{item}}</view>
</template>

（2）然后在data下面（与data同级）进行写函数


<script>export default {data() {return {uplist:['1','2','3','4','5','6','7','8','9',],},onPullDownRefresh() { // 监听下拉刷新的动作console.log('触发了刷新');setTimeout(()=>{  //设置刷新的时间this.uplist = ['楚',君','三郑','耳机','包子','999']; //下拉刷新以后的新数据uni.stopPullDownRefresh() //停止当前页面的下拉刷新},1000)},methods: {}
</script>

这样就可以达到下拉页面就可以刷新的效果啦！

点击标签法:

点击标签就可以刷新页面的数据
（1）同样先写出一些数据内容，再在标签处写点击事件

<template><view v-for="(item,index) in uplist" class="testbox">{{item}}</view><button @click="update()">点击更新数据</button>
</template>

然后在methods里面写点击事件的方法


<script>export default {data() {return {uplist:['1','2','3','4','5','6','7','8','9',],},    methods: {update() {uni.startPullDownRefresh() //通过点击标签进行下拉刷新this.uplist = ['楚','君','三郑','耳机','包子','999']; }}
</script>

这样就可以达到下拉页面就可以刷新的效果,

之后接接口的时候，就可以进行请求数据，达到下拉刷新效果

二、向上加载的思路：

第一步：

在pages.json里面，

找到想要设置向上加载的页面，

进行配置加入-----"onReachBottomDistance":200 //配备触底距离

（onReachBottomDistance，比如设为200，那么滚动页面到距离底部200px时，

就会触发onReachBottom事件）

"onReachBottomDistance":200 //配备触底距离

第二步：
（1）先写出一些数据内容

<template><view v-for="(item,index) in uplist" class="testbox">{{item}}</view>
</template>

（2）然后在data下面（与data同级）进行写函数（onReachBottom）

<script>export default {data() {return {uplist:['1','2','3','4','5','6','7','8','9',],},onReachBottom() {console.log('数据触底了');this.uplist = [...this.uplist,... ['楚','君','三郑','耳机','包子','999']] //数据触底以后，加载新的数据（就是加载新一页的数据）},methods:    }
</script>

tips: onReachBottom使用注意：可在pages.json里定义具体页面底部的触发距离

#uni-app 开发项目实战# 下拉刷新，上拉加载数据相关推荐

（仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录一.点击过的新闻列表文字变灰效果图实现思路导入ormlite数据库类依赖利用ormlite创建数据库和表创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
Android自定义控件实战——实现仿IOS下拉刷新上拉加载 PullToRefreshLayout
下拉刷新控件,网上有很多版本,有自定义Layout布局的,也有封装控件的,各种实现方式的都有.但是很少有人告诉你具体如何实现的,今天我们就来一步步实现自己封装的 PullToRefreshLayout ...
Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
Android ListView 实现下拉刷新上拉加载
转载请注明出处:http://blog.csdn.net/allen315410/article/details/39965327 1.简介无疑,在Android开发中,ListView是使用非常频 ...
Android 下拉刷新上拉载入多种应用场景超级大放送（上）
转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉载入,网上的Demo太多太多了,这 ...
android 列表上拉加载更多,Android 下拉刷新,上拉加载更多控件–支持ListView,GridView和ScrollView...
麦洛遇到这样一个需求,实现类似于IOS下拉刷新,上拉加载更多的控件.麦洛google,baidu了一番,网上有不少实现,比较常见的是国外牛人的实现,不过国外的实现基本上都是扩展于ListView,所以 ...
Android 下拉刷新上拉加载多种应用场景超级大放送（上）
转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉加载,网上的Demo太多太多了,这 ...
分享轮子-flutter下拉刷新上拉加载
flutter下拉上拉组件轮子什么是flutter? 首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Nat ...
微信小程序下拉刷新/上拉加载组件
简介一款基于官方组件scroll-view进行封装的支持上拉加载下拉刷新的微信小程序组件,需要基础库2.10.1及以上, 项目地址:github 预览功能下拉刷新上拉加载支持自定义下拉样式 ...
vue 仿B站下拉刷新上拉加载
vue 仿B站下拉刷新上拉加载功能大部分都是跟B站一样的,还是有一些瑕疵和小bug的,φ(>ω<*) 先上demo连接和gitHub项目地址吧 demo展示 https://github ...

#uni-app 开发项目实战# 下拉刷新，上拉加载数据

#uni-app 开发项目实战# 下拉刷新，上拉加载数据相关推荐

最新文章

热门文章