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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
AngularJS实现表单验证
Jan 28 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
解析MySql与Java的时间类型
2013/06/22 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python刷投票的脚本实现代码
2014/11/08 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
python列表的常用操作方法小结
2016/05/21 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
安装docker-compose的两种最简方法
2019/07/30 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
公司JAVA开发面试题
2015/04/02 面试题
军人违纪检讨书
2014/02/04 职场文书
司机检讨书
2014/02/13 职场文书
酒鬼酒广告词
2014/03/21 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
Python基本数据类型之字符串str
2021/07/21 Python