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 相关文章推荐
JavaScript Eval 函数使用
Mar 23 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 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
php 冒泡排序 交换排序法
2011/05/10 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
vue如何截取字符串
2019/05/06 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python安装pil库方法及代码
2019/06/25 Python
python for和else语句趣谈
2019/07/02 Python
python os.fork() 循环输出方法
2019/08/08 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Python偏函数实现原理及应用
2020/11/20 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
苹果Mac升级:MacSales.com
2017/11/20 全球购物
初中生自我评价
2014/02/01 职场文书
社区交通安全实施方案
2014/03/22 职场文书
亮剑观后感300字
2015/06/05 职场文书
倡议书怎么写?
2019/04/11 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js