vue.js整合vux中的上拉加载下拉刷新实例教程
程序员文章站
2022-04-10 10:14:38
前言
vux 是基于 vue 和 weui 开发的手机端页面 ui 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 pc...
前言
vux 是基于 vue 和 weui 开发的手机端页面 ui 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 pc 那一套样式适配了大小而已)。于是用 vue 重构了表单组件,后来一发不可收拾把其他常用组件也一并开发了。
相比于 react 还是更喜欢用 vue ,除了目前社区组件不多,周边构建工具还是比较完善的(作者也特别勤奋)。
下面话不多说了,来一看看详细的介绍吧。
先上图
创建项目
使用vue-cli 创建一个vue项目
安装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生成的数据,可以看一下这篇文章:
安装 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>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
上一篇: javascript实现二叉树的代码
下一篇: JS实现的随机排序功能算法示例