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

前端之家收集整理的这篇文章主要介绍了vue.js整合vux中的上拉加载下拉刷新实例教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已)。于是用 vue 重构了表单组件,后来一发不可收拾把其他常用组件也一并开发了。

相比于 React 还是更喜欢用 Vue ,除了目前社区组件不多,周边构建工具还是比较完善的(作者也特别勤奋)。

下面话不多说了,来一看看详细的介绍吧。

先上图

创建项目

使用vue-cli 创建一个vue项目

安装vux,可以参考:

配置

打开后会看到一段话

该组件已经不再维护,也不建议使用,大部分情况下也不需要用到该组件。 建议使用第三方相关组件,相关 issue 将不会处理。

不知道作者为啥不维护了,明明需求挺多的

我没有用demo里的 LoadMore 组件,用的是 Scroller里自带的 use-pullup,use-pulldown 下面是我的配置

请求接口遍历数据

接口服务用的是mock.js生成的数据,可以看一下这篇文章随机数据和使用express输出json接口

安装 axios

{ this.$nextTick(() => { this.$refs.scrollerBottom.reset() }) cb(response.data) }) } } //...

完善refresh,loadMore方法

{ 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 方法

{ this.$refs.scrollerBottom.reset({top: 0}) }) this.loadMore() } //...

最后把html部分补全

Box" v-for="(item,index) in list" :key="index">

完整代码

Box" v-for="(item,index) in list" :key="index">

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

猜你在找的Vue相关文章