vue.js整合vux中的上拉加载下拉刷新实例教程
发布时间：2020-12-17 02:38:43 所属栏目：百科 来源：网络整理
导读：前言 Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库，开发初衷是满足公司的微信端表单需求，因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已)。于是用 vue 重构了表单组件，后来一发不可收拾把其他常用组件也一并开
前言Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库，开发初衷是满足公司的微信端表单需求，因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已)。于是用 vue 重构了表单组件，后来一发不可收拾把其他常用组件也一并开发了。 相比于 React 还是更喜欢用 Vue ，除了目前社区组件不多，周边构建工具还是比较完善的(作者也特别勤奋)。 下面话不多说了，来一看看详细的介绍吧。 先上图
创建项目使用vue-cli 创建一个vue项目 安装vux，可以参考： 配置打开后会看到一段话 该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。 建议使用第三方相关组件，相关 issue 将不会处理。 不知道作者为啥不维护了，明明需求挺多的 我没有用demo里的 LoadMore 组件，用的是 Scroller里自带的 use-pullup,use-pulldown 下面是我的配置 请求接口遍历数据接口服务用的是mock.js生成的数据，可以看一下这篇文章： 安装 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部分补全 完整代码 |
