vue.js整合vux中的上拉加载下拉刷新实例教程
更新时间：2018年01月09日 10:01:22 作者：朋也
这篇文章主要给大家介绍了关于vue.js整合vux中上拉加载下拉刷新的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
前言
Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库，开发初衷是满足公司的微信端表单需求，因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已)。于是用 vue 重构了表单组件，后来一发不可收拾把其他常用组件也一并开发了。
相比于 React 还是更喜欢用 Vue ，除了目前社区组件不多，周边构建工具还是比较完善的(作者也特别勤奋)。
下面话不多说了，来一看看详细的介绍吧。
先上图
创建项目
使用vue-cli 创建一个vue项目
安装vux，可以参考：vux快速入门
配置
打开后会看到一段话
该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。 建议使用第三方相关组件，相关 issue 将不会处理。
不知道作者为啥不维护了，明明需求挺多的
我没有用demo里的 LoadMore 组件，用的是 Scroller里自带的 use-pullup, use-pulldown 下面是我的配置
<!--
height: 我用到x-header了，文档里说header高是48px,所以这里设置成-48
-->
<scroller use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
use-pulldown :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refresh"
lock-x ref="scrollerBottom" height="-48">
</scroller>
<script>
import {Scroller, XHeader} from 'vux'
const pulldownDefaultConfig = {
content: '下拉刷新',
height: 40,
autoRefresh: false,
downContent: '下拉刷新',
upContent: '释放后刷新',
loadingContent: '正在刷新...',
clsPrefix: 'xs-plugin-pulldown-'
}
const pullupDefaultConfig = {
content: '上拉加载更多',
pullUpHeight: 60,
height: 40,
autoRefresh: false,
downContent: '释放后加载',
upContent: '上拉加载更多',
loadingContent: '加载中...',
clsPrefix: 'xs-plugin-pullup-'
}
export default {
components: {
XHeader,
Scroller
},
mounted() {
this.$nextTick(() => {
this.$refs.scrollerBottom.reset({top: 0})
})
},
data() {
return {
list: [],
pullupDefaultConfig: pullupDefaultConfig,
pulldownDefaultConfig: pulldownDefaultConfig
}
},
methods: {
refresh() {
},
loadMore() {
}
}
}
</script>
请求接口遍历数据
接口服务用的是mock.js生成的数据，可以看一下这篇文章：使用mock.js随机数据和使用express输出json接口
安装 axios
yarn add axios
//...
methods: {
fetchData(cb) {
axios.get('http://localhost:3000/').then(response => {
this.$nextTick(() => {
this.$refs.scrollerBottom.reset()
})
cb(response.data)
})
}
}
//...
完善refresh,loadMore方法
//...
methods: {
refresh() {
this.fetchData(data => {
this.list = data.list
this.$refs.scrollerBottom.enablePullup()
this.$refs.scrollerBottom.donePulldown()
})
},
loadMore() {
this.fetchData(data => {
if (this.list.length >= 10) {
this.$refs.scrollerBottom.disablePullup()
}
this.list = this.list.concat(data.list)
this.$refs.scrollerBottom.donePullup()
})
}
}
//...
在组件加载的时候调用一下 loadMore 方法
//...
mounted() {
this.$nextTick(() => {
this.$refs.scrollerBottom.reset({top: 0})
})
this.loadMore()
}
//...
最后把html部分补全
<scroller> <div style="padding: 10px 0"> <div class="box" v-for="(item, index) in list" :key="index"> <p class="list"></p> </div> </div> </scroller>
完整代码
<template>
<div>
<x-header :left-options="{'showBack': false}">上拉加载，下拉刷新</x-header>
<scroller use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
use-pulldown :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refresh"
lock-x ref="scrollerBottom" height="-48">
<div style="padding: 10px 0">
<div class="box" v-for="(item, index) in list" :key="index">
<p class="list"></p>
</div>
</div>
</scroller>
</div>
</template>
<script>
import {Scroller, XHeader} from 'vux'
import axios from 'axios'
const pulldownDefaultConfig = {
content: '下拉刷新',
height: 40,
autoRefresh: false,
downContent: '下拉刷新',
upContent: '释放后刷新',
loadingContent: '正在刷新...',
clsPrefix: 'xs-plugin-pulldown-'
}
const pullupDefaultConfig = {
content: '上拉加载更多',
pullUpHeight: 60,
height: 40,
autoRefresh: false,
downContent: '释放后加载',
upContent: '上拉加载更多',
loadingContent: '加载中...',
clsPrefix: 'xs-plugin-pullup-'
}
export default {
components: {
XHeader,
Scroller
},
mounted() {
this.$nextTick(() => {
this.$refs.scrollerBottom.reset({top: 0})
})
this.loadMore()
},
data() {
return {
list: [],
pullupDefaultConfig: pullupDefaultConfig,
pulldownDefaultConfig: pulldownDefaultConfig
}
},
methods: {
fetchData(cb) {
axios.get('http://localhost:3000/').then(response => {
this.$nextTick(() => {
this.$refs.scrollerBottom.reset()
})
cb(response.data)
})
},
refresh() {
this.fetchData(data => {
this.list = data.list
this.$refs.scrollerBottom.enablePullup()
this.$refs.scrollerBottom.donePulldown()
})
},
loadMore() {
this.fetchData(data => {
if (this.list.length >= 10) {
this.$refs.scrollerBottom.disablePullup()
}
this.list = this.list.concat(data.list)
this.$refs.scrollerBottom.donePullup()
})
}
}
}
</script>
<style lang="less">
.box {
padding: 5px 10px 5px 10px;
&:first-child {
padding: 0 10px 5px 10px;
}
&:last-child {
padding: 5px 10px 0 10px;
}
}
.list {
background-color: #fff;
border-radius: 4px;
border: 1px solid #f0f0f0;
padding: 30px;
}
.xs-plugin-pulldown-container {
line-height: 40px;
}
.xs-plugin-pullup-container {
line-height: 40px;
}
</style>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了vue3中使用sse最佳实践,封装工具,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了浅谈vue中.vue文件解析流程,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
vite作为新一代工具链,具有很多便利之处,配置也非常简单,它很好地整合了Rollup和其他复杂的构建项,并提供了多种方向的典型脚手架模板,深受大家喜爱,本文给大家介绍了如何解决vite项目无法使用zangodb包装器的问题,需要的朋友可以参考下2023-10-10
script-setup是一个比较有争议的新特性,作为 setup 函数的语法糖,褒贬不一,不过经历了几次迭代之后,目前在体验上来说,感受还是非常棒的,这篇文章主要给大家介绍了关于vue3中setup-script应用的相关资料,需要的朋友可以参考下2022-01-01
在我们使用vue的时候,当数据发生了改变,界面也会跟着更新,但这并不是理所当然的,我们修改数据的时候vue是如何监听数据的改变以及当数据发生改变的时候vue如何让界面刷新的,所以本文就给大家讲讲Vue.js 数据双向绑定是如何实现的2023-07-07
这篇文章主要介绍了Vue-CLI 3.X 部署项目至生产服务器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
vite 这个是尤大开发的新工具,目的是以后替代webpack,下面这篇文章主要给大家介绍了关于如何创建基于vite的vue项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要为大家介绍了vue+nodejs获取多个表数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
本文主要介绍Vue.js中监听器和计算属性的相关知识点，包括对普通属性的监听、对对象的监听、对数组的监听，以及计算属性的Set方法，计算属性与监听器的区别等等2021-05-05
<Transition> 是一个内置组件,这意味着它在任意别的组件中都可以被使用,无需注册,它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上,本文介绍了Vue3使用transition实现组件切换的过渡效果,需要的朋友可以参考下2024-09-09
最新评论