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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 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
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
php修改数组键名的方法示例
2017/04/15 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
JS中Safari浏览器中的Date
2017/07/17 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Django中的forms组件实例详解
2018/11/08 Python
Python如何调用JS文件中的函数
2019/08/16 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
python regex库实例用法总结
2021/01/03 Python
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
师范生求职信
2014/06/14 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
应届毕业生自荐信
2015/03/04 职场文书
离职告别感言
2015/08/04 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis