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


Posted in Javascript onJanuary 09, 2018

前言

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

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

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

先上图

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

创建项目

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

安装vux,可以参考:vux快速入门

配置

安装 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 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 #Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 #Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 #Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 #Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 #Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 #Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 #jQuery
You might like
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
python安装与使用redis的方法
2016/04/19 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python中six模块基础用法
2019/12/08 Python
Python tkinter常用操作代码实例
2020/01/03 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
大学毕业后的十年规划
2014/01/07 职场文书
试用期员工考核制度
2014/01/22 职场文书
装饰活动策划方案
2014/02/11 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
精神文明建设标语
2014/06/16 职场文书
2015年班组工作总结
2015/04/20 职场文书
四大名著读书笔记
2015/06/25 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
靠谱准确的求职信
2019/04/02 职场文书