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 篱式条件判断
Aug 22 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
js单例模式的两种方案
Oct 22 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 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
安装docker和docker-compose实例详解
2019/07/30 PHP
类似框架的js代码
2006/11/09 Javascript
JS array 数组详解
2009/03/22 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
解决python3 json数据包含中文的读写问题
2018/05/10 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
keras之权重初始化方式
2020/05/21 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
大课间活动制度
2014/01/18 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏