哈喽，告诉你件事儿！现在好多手机应用上都有一个叫做“下滑刷新”的功能，这样我们就能随时了解到最新动态了。接下来我就教你如何用Vue搞定这东西，让你的软件人气飙升！
需要用到的插件
这个Vue插件简单好使，一看就会用！想要做个下拉刷新炫酷效果？先装上这两个插件。
（1）快点记住这个实用的滚动神器——better-scroll！手势滑动、部分滑动和刷新都没问题。要怎么刷新？赶紧去官网看看吧：#%E6%A8%AA%E5%90%91%E6%BB%9A%E5%8A%A8
（2）知道axios吗？功能跟我们日常用的HTTP客户端差不多，搞数据特别溜。想学怎么用？赶紧上网查查！
安装好npm包没？搞定啦就来试试插件呗！为了展示页面内容，这次要用上better-scroll和axios两款神器。哦对了对了，btter-scroll还能实现下拉刷新的酷炫效果！
安装插件
首先来装个俩软件吧——better-scroll和axios。在你的电脑上找到”终端”这个东西，然后输入下面这段代码就能搞定了：
bash 搞定！打开终端输入几个字母就能装好better-scroll和axios了~
搞定！现在可以尽情使用这俩插件装上后，你在 package.json 里就能找到它们了哟。
在Vue组件中引用插件
好，现在咱就来填Vue组件里塞两个小玩意儿！啥时候用？就在你想要下拉刷新的地方，这么做：
javascript 来看看BScroll这个东东，它可以简化一些滚动操作。 import axios from 'axios'; 搞定！装上这俩插件就能在组件里跑起来咯。接下来？把这个Vue模板弄得漂漂亮亮的呗，感觉就像网页那样。 在Vue模板中添加DOM结构 首先，我们要用Vue模板画出一个框，然后把要展示的内容放进去。这样才方便better-scroll这个插件工作！简单来说就是这样，看看这里吧：
html
你知道这个公式怎么用么？它就像个向导，帮我们找到并快速使用组件里面的JavaScript代码。
在CSS中设置相应样式
让better-scroll更好用？加点CSS！比如说：
“`css
.wrapper {
height: 100vh; /* 设置容器的高度 */
overflow: hidden; /* 隐藏滚动条 */
}
.content {
/* 这里可以设置内容的样式 */
搞定！现在能用上BetterScroll插件。下一步，就得给这个组件的JavaScript加段初始插件的代码哈。
初始化better-scroll插件
记住了去看看咱们组件里面那几段JavaScript代码，尤其要注意在mounted这个生命周期挂载阶段设置好better-scroll插件的初始化参数。通俗点儿说，你就按照我说的这样做吧：
export default {
mounted() {
直接换掉这个家伙为BSroll，再丢到’wrapper’里面就行了，特轻松！
pullDownRefresh: {
npm install better-scroll axios --save
threshold: 50, // 下拉距离
stop: 20 // 回弹距离
}
});
在屏幕上往下拉，就会触发这个方法。
import BScroll from 'better-scroll';
import axios from 'axios';
export default {
name: 'Refresh',
data() {
return {
listData: [],
bs: null
};
},
mounted() {
this.getListData();
// 在mounted生命周期函数中初始化better-scroll插件
this.bs = new BScroll(this.$refs.wrapper, {
click: true,
pullDownRefresh: true
});
// 监听下拉刷新事件
this.bs.on('pullingDown', () => {
// 根据需求实现相应操作
this.getListData();
// 数据加载完成后需要结束下拉刷新操作
this.bs.finishPullDown();
// 重新计算better-scroll插件的高度
this.bs.refresh();
});
},
methods: {
getListData() {
axios.get('xxxx').then(response => {
this.listData = response.data;
});
}
}
};
},
methods: {
async onPullingDown() {
// 向服务器请求新数据
取了个新的数据，就是那个’/api/data’上的。
- {{ item }}
// 更新数据
this.data = newData.data;
// 完成下拉刷新
this.scroll.finishPullDown();
// 重新计算滚动高度
.refresh-wrapper {
height: 100%;
overflow: hidden;
position: relative;
}
.refresh-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
this.scroll.refresh();
}
}
首先装个better-scroll插件，这样就能在你的网站上实现”下拉加载”了。只要用户想看更多东西，立马跟服务器说，它就会立马把新鲜事送来，页面也就跟着变新！
总结
看完这篇文章你就会用Vue.js实现下拉刷新功能，让你的APP变得更有趣更好用。别犹豫，快把这些代码用到自己的项目里去，稍微改改就能用，效果肯定赞爆了！
哈啰！想说就说，别忍住。你用下滑刷新的时候，最在乎什么？快去评论区说说，让更多朋友看到这篇有意思的文章！
评论0