Vue中使用better-scroll实现下拉刷新，上拉加载功能。

小咪咪 2022-01-09 06:47 395阅读 0赞

拿部分代码举个栗子:

mounted() \{    //第一步：导入插件后，在mounted中初始化插件

this.$nextTick(() => \{

this.scroll = new BScroll(this.$refs.itemScroll, \{

click: true,

probeType: 3

\})

this.scroll.on('scroll', (pos) => \{

if (pos.y > 50) \{  //下拉高度大于50 (看自己需要)

this.dropDown = true   //逻辑操作，我这是显示下拉提示组件

\} else \{

this.dropDown = this.isLoading ? true : false   //isloading 表示正在加载数据(加载中也显示下拉提示组件)

\}

\})

//touchEnd（手指离开以后触发） 通过这个方法来监听下拉刷新

this.scroll.on('touchEnd', (pos) => \{

// 下拉动作

if (pos.y > 50) \{

this.isLoading = true

this.page = 1

this.getPostList().then(res => \{  //此处请求接口，处理数据，具体逻辑看自己需求，此处仅供参考

this.list = res.list

this.com\_info = res.list.comment\_info

this.downTip = 2  //提示内容

setTimeout(() => \{

this.isLoading = false

this.dropDown = false

this.downTip = 1

\}, 1000)

\})

\}

//上拉加载 总高度>下拉的高度+数值(20仅供参考) 触发加载更多

if (this.scroll.maxScrollY > pos.y + 20) \{

//使用refresh 方法 来更新scroll 解决无法滚动的问题

if (this.isMorePage) \{   //判断是否有下一页

this.pullUp = true   //显示上拉提示组件

this.page++

this.getPostList().then(res => \{  //调用接口，处理数据

this.pullUp = false

this.list = this.list.concat(res.list)

this.scroll.refresh()   //刷新插件!!!!!这个挺重要的！别忘了。不然会一卡一卡

\})

\}

\}

\})

\})

\},

转载于:https://www.cnblogs.com/kevinyeah/p/11004604.html

发表评论取消回复

表情：

评论列表（有 0 条评论，395人围观）

还没有评论，来说两句吧...

相关阅读

相关使用PullToRefresh实现下拉刷新和上拉加载

PullToRefresh是一套实现非常好的下拉刷新库，它支持： 1.ListView 2.ExpandableListView 3.GridView 4.WebVie

男娘i/ 2024年02月17日 16:01/ 0 赞/ 34 阅读

相关上拉加载下拉刷新

老方法，先上效果图： ![1264306-20190925171702811-981213350.gif][] 1.加入下拉刷新上拉加载的依赖 1 //下拉刷新

一时失言乱红尘/ 2023年08月17日 17:09/ 0 赞/ 172 阅读

相关 Android实现下拉刷新,上拉加载

首先，要导入两个依赖（很重要！！！！） App——>build gradle——>Sync Now(右上角) implementation 'com.scwang

川长思鸟来/ 2023年06月13日 06:15/ 0 赞/ 39 阅读

相关用vant实现下拉刷新和上拉加载功能(vue项目)

下拉刷新和上拉加载一、安装vant 二、按需引入组件三、操作main.js 四、实现下拉刷新和上拉加载功能的index.vue页面一、安

Bertha 。/ 2022年12月22日 15:23/ 0 赞/ 702 阅读

相关 php 上拉加载下拉刷新页面,上拉加载，下拉刷新（即分页功能）

Hello APP \contant\{ \} .ids\{ text-align: center; margin-bottom: 5px; border-bott

约定不等于承诺〃/ 2022年10月21日 12:53/ 0 赞/ 362 阅读

相关下拉刷新上拉加载

下拉刷新： ![Center][] ![Center 1][] ![Center 2][] 上划加载 ![Center 3][] ![C

约定不等于承诺〃/ 2022年07月17日 02:22/ 0 赞/ 383 阅读

相关使用PullToRefresh实现下拉刷新和上拉加载

PullToRefresh是一套实现非常好的下拉刷新库，它支持： 1.ListView 2.ExpandableListView 3.GridView 4.WebVie

古城微笑少年丶/ 2022年06月08日 05:19/ 0 赞/ 240 阅读

相关 Vue中使用better-scroll实现下拉刷新，上拉加载功能。

拿部分代码举个栗子: mounted() \{ //第一步：导入插件后，在mounted中初始化插件 this.$nextTi

小咪咪/ 2022年01月09日 06:47/ 0 赞/ 396 阅读

相关 mui实现上拉刷新与下拉加载功能

引言下拉刷新与上拉加载功能可谓是现在APP开发的两个常见功能，在电脑端我们常常通过点击分页的形式来向用户展示更多内容，不过在移动端我们可不想有这些多余的点击操作，只要想

曾经终败给现在/ 2021年10月19日 03:12/ 0 赞/ 733 阅读

相关 uniapp项目下拉刷新、上拉加载功能实现。

1、下拉刷新（1）在 page.json 文件夹下找到对应页面，并在style下加入 — “enablePullDownRefresh”: true ，如下：

「爱情、让人受尽委屈。」/ 2021年07月25日 12:15/ 0 赞/ 975 阅读