Vue uni-app框架实现上拉加载下拉刷新功能

目录
  • 实现上拉加载更多
  • 优化
  • 实现下拉刷新

实现上拉加载更多

打开项目根目录中的pages.json配置文件，为subPackages分包中的商品goods_list页面配置上拉触底的距离：

"subPackages": [
   {
     "root": "subpkg",
     "pages": [
       {
         "path": "goods_detail/goods_detail",
         "style": {}
       },
       {
         "path": "goods_list/goods_list",
         "style": {
           "onReachBottomDistance": 150
         }
       },
       {
         "path": "search/search",
         "style": {}
       }
     ]
   }
 ]

在goods_list页面中，和methods节点平级，声明onReachBottom事件处理函数，用来监听页面的上拉触底行为：

// 触底的事件
onReachBottom() {
  // 让页码值自增 +1
  this.queryObj.pagenum += 1
  // 重新获取列表数据
  this.getGoodsList()
}

改造methods中的getGoodsList函数，当列表数据请求成功之后，进行新旧数据的拼接处理：

// 获取商品列表数据的方法
async getGoodsList() {
  // 发起请求
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  if (res.meta.status !== 200) return uni.$showMsg()
  // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
  this.goodsList = [...this.goodsList, ...res.message.goods]
  this.total = res.message.total
}

优化

通过节流阀防止发起额外的请求

在 data 中定义isloading节流阀如下：

data() {
  return {
    // 是否正在请求数据
    isloading: false
  }
}

修改getGoodsList方法，在请求数据前后，分别打开和关闭节流阀：

// 获取商品列表数据的方法
async getGoodsList() {
  // ** 打开节流阀
  this.isloading = true
  // 发起请求
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  // ** 关闭节流阀
  this.isloading = false
  // 省略其它代码...
}

在onReachBottom触底事件处理函数中，根据节流阀的状态，来决定是否发起请求：

// 触底的事件
onReachBottom() {
  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  if (this.isloading) return
  this.queryObj.pagenum += 1
  this.getGoodsList()
}

判断数据是否加载完毕

如果下面的公式成立，则证明没有下一页数据了：

当前的页码值 * 每页显示多少条数据 >= 总数条数
pagenum * pagesize >= total

修改onReachBottom事件处理函数如下：

// 触底的事件
onReachBottom() {
  // 判断是否还有下一页数据
  if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')
  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  if (this.isloading) return
  this.queryObj.pagenum += 1
  this.getGoodsList()
}

实现下拉刷新

在pages.json配置文件中，为当前的goods_list页面单独开启下拉刷新效果：

"subPackages": [{
  "root": "subpkg",
  "pages": [{
    "path": "goods_detail/goods_detail",
    "style": {}
  }, {
    "path": "goods_list/goods_list",
    "style": {
      "onReachBottomDistance": 150,
      "enablePullDownRefresh": true,
      "backgroundColor": "#F8F8F8"
    }
  }, {
    "path": "search/search",
    "style": {}
  }]
}]

监听页面的onPullDownRefresh事件处理函数：

// 下拉刷新的事件
onPullDownRefresh() {
  // 1. 重置关键数据
  this.queryObj.pagenum = 1
  this.total = 0
  this.isloading = false
  this.goodsList = []
  // 2. 重新发起请求
  this.getGoodsList(() => uni.stopPullDownRefresh())
}

修改getGoodsList函数，接收cb回调函数并按需进行调用：

// 获取商品列表数据的方法
async getGoodsList(cb) {
  this.isloading = true
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  this.isloading = false
  // 只要数据请求完毕，就立即按需调用 cb 回调函数
  cb && cb()
  if (res.meta.status !== 200) return uni.$showMsg()
  this.goodsList = [...this.goodsList, ...res.message.goods]
  this.total = res.message.total
}

到此这篇关于Vue uni-app框架实现上拉加载下拉刷新功能的文章就介绍到这了,更多相关Vue uni-app内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈VUE uni-app 自定义组件

    1.父组件向子组件传递数据可以通过 props 2.子组件向父组件传递数据可以通过自定义事件,父组件自定义事件,子组件触发父组件的事件,并传传递数据 3.子组件可以定义插槽slot,让父组件自定义要显示的内容 4.使用easycom规范,可以真接使用组件 page/news/news.vue <template> <view> <veiw>自定义组件使用规范</veiw> <card color="red" @fclick=&quo

  • 浅谈VUE uni-app 模板语法

    1.v-bind(简写 :) 组件属性中要使用data中定义的数据变量,或组件属性要使用表达式,需用v-bind指定 简写 : 2.v-on(简写@) 监听DOM事件 click.stop 可以阻止事件穿透 3.v-model 数据双向绑定 4.v-if,v-else-if,v-else 条件判断,决定某个内容是否挂载 5.v-show 条件判断,决定某个内容是否显示 6.三元运算符 7.空标签 block 8.v-for:列表渲染 <template> <view v-bind:cla

  • 浅谈VUE uni-app 基础组件

    1 .scroll-view 使用竖向滚动时,需要给 一个固定高度,通过 css 设置 height:使用横向滚动时,需要给添加white-space: nowrap;样式. scroll-y:允许纵向滚动,scroll-x:允许横向滚动 @scroll: 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 数据双向绑定 <template> <view> &

  • 浅谈VUE uni-app 生命周期

    目录 一.应用的生命周期 二.页面生命周期 三.组件生命周期 总结 一.应用的生命周期 onLaunch 当uni-app 初始化完成时触发(全局只触发一次)onShow 当 uni-app 启动,或从后台进入前台显示onHide 当 uni-app 从前台进入后台 二.页面生命周期 onLoad 监听页面加载onReady 监听页面初次渲染完成.注意如果渲染速度快,会在页面进入动画完成前触发onShow 监听页面显示.页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面onHide 监

  • 浅谈VUE uni-app 条件编码和页面布局

    目录 条件编译 页面布局 总结 条件编译 条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台. 写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾. #ifdef:if defined 仅在某平台存在 #ifndef:if not defined 除了某平台均存在 %PLATFORM%:平台名称 页面布局 scss 规范,rpx 在iphone6/7/8 中 宽度为750,2rpx = 1px <style

  • 浅谈VUE uni-app 常用API

    目录 一.路由与页面跳转 二.界面 总结 一.路由与页面跳转 uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面.uni.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面.uni.reLaunch(OBJECT) 关闭所有页面,打开到应用内的某个页面.uni.switchTab(OBJECT) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面.uni.navigateB

  • 浅谈VUE uni-app 核心知识

    目录 规范 a. 页面文件遵循vue单文件组件规范 b. 组件标签靠近小程序规范 c. 接口能力(JS API)靠近微信小程序规范 e. 数据绑定及事件处理使用Vue.js 规范 特色 a. 条件编译 b. App端的Nvue开发 c. HTML5+ 总结 规范 a. 页面文件遵循vue单文件组件规范 <!-- 模板块 --> <template> <view class="main"> {{msg}} </view> </temp

  • 浅谈VUE uni-app 开发环境

    目录 1.通过 HBuilderX 可视化界面 2.通过 vue-cli 命令执行 总结 1.通过 HBuilderX 可视化界面 a. 创建uni-app: b. 运行uni-app; c. 发布uni-app 2.通过 vue-cli 命令执行 a. 安装node.js,下载地址:https://nodejs.org/en/download/ ##检查node.js 版本 node -v v14.18.1 npm -v b. 全局安装 vue-cli npm install -g @vue/

  • Vue uni-app框架实现上拉加载下拉刷新功能

    目录 实现上拉加载更多 优化 实现下拉刷新 实现上拉加载更多 打开项目根目录中的pages.json配置文件,为subPackages分包中的商品goods_list页面配置上拉触底的距离: "subPackages": [ { "root": "subpkg", "pages": [ { "path": "goods_detail/goods_detail", "style&

  • Vue vant-ui框架实现上拉加载下拉刷新功能

    目录 知识点速记 基本用法 下拉刷新 代码实现 1.页面布局 2.样式 3.方法 下拉刷新效果: 知识点速记 基本用法 List通过loading和finished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true.此时可以发起异步操作并更新数据,数据更新完毕后,将loading设置成false即可.若数据已全部加载完毕,则直接将finished设置成true即可. 下拉刷新 List 组件可以与PullRefresh组件结合使用,实现下拉刷新的效果.

  • vue基于vant实现上拉加载下拉刷新的示例代码

    vue基于vant实现上拉加载下拉刷新的示例代码

    前言 普遍存在于各种app中的上拉加载下拉刷新功能大家都不陌生吧,一般来说,在数据量比较大的情况下,为了更快的渲染和给用户更好的观感体验,我们会将数据做分页处理,让其批量加载,这样一来,在渲染速度上,能给用户一个比较好的体验效果.话说回来,分页处理,也就是我们今天要讲的上拉加载和下拉刷新. 实现思路 下拉刷新: 请求接口赋完值后,将接口返回数据长度与总条数进行比较控制加载不加载的状态,在下拉刷新方法中定义起始页码为第一页,调整加载的状态为false,最后调用请求数据的接口方法,做适当轻提示即可.

  • 微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（一）

    微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一) 页面缓存的设置优化了页面加载,减少了频繁的调取接口,使用户在断网的情况下有更好的体验. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localSt

  • Android ListView实现上拉加载下拉刷新和滑动删除功能

    Android ListView实现上拉加载下拉刷新和滑动删除功能

    最近项目需要用到可以滑动删除并且带有上拉加载下拉刷新的Listview,查阅了一些资料,大多都是在SwipeMenuListView的基础上去添加头部和底部View,来扩展上拉加载和下拉刷新的功能,不过需要手动的去绘制UI及处理一些动画效果.用起来也不是特别方便.刚好项目中用到PulltorefreshLibrary库,就尝试着扩展了一个PullToRefreshSwipeMenuListView类来实现需求.先看一下效果: 实现步骤 一.组合Pulltorefresh与SwipeMenuLis

  • Android自定义listview布局实现上拉加载下拉刷新功能

    Android自定义listview布局实现上拉加载下拉刷新功能

    listview实现上拉加载以及下拉刷新的方式有很多.下面是我写的一种自定义的布局,复用性也比较的强.首先就是继承的listview的自定义view.   AutoListView.Java: package com.example.mic.testdemo.view; import android.annotation.TargetApi; import android.content.Context; import android.os.Build; import android.os.Bu

  • mescroll.js上拉加载下拉刷新组件使用详解

    本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下 附上链接地址http://www.mescroll.com/api.html#NPM,手机端和浏览器都能够使用,唯一推荐: 使用过程中要注意这些问题http://www.mescroll.com/qa.html: 使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一定要在dom渲染之后的方法(didMount)中初始化,因为这个需要拿到dom对象:

  • Android通过XListView实现上拉加载下拉刷新功能

    本文实例为大家分享了XListView实现上拉加载下拉刷新的具体代码,供大家参考,具体内容如下 ## 导入XListVIew第三方库文件.通过LinkedList将刷新数据插入到集合头部,将加载的数据放入集合尾部 ## private Context context; private View view; private String path; private XListView xlv; private LinkedList<Data> listData; private Handler

  • vue.js整合vux中的上拉加载下拉刷新实例教程

    vue.js整合vux中的上拉加载下拉刷新实例教程

    前言 Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已).于是用 vue 重构了表单组件,后来一发不可收拾把其他常用组件也一并开发了. 相比于 React 还是更喜欢用 Vue ,除了目前社区组件不多,周边构建工具还是比较完善的(作者也特别勤奋). 下面话不多说了,来一看看详细的介绍吧. 先上图 创建项目 使用vue-cli 创建一个vue项目 安装vux

  • 微信小程序（六）：列表上拉加载下拉刷新示例

    1.列表(本部分内容出入官方文档) 对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: '

随机推荐