vux-scroller实现移动端上拉加载功能过程解析


Posted in Javascript onOctober 08, 2019

本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能:

纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态管理工具,vux是一款移动端的UI组件库;

vux(官方文档:https://doc.vux.li/zh-CN/)是基于WeUi和vue(2.x)开发的移动端的UI组件库,主要服务于微信页面。基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUi的基础上定制需要的样式。vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。vux并不完全依赖于WeUi,vux在WeUi的基础上扩展了多个常用组件,但是尽量保持整体UI样式接近WeUi的设计规范。

首先我们需要安装vux的依赖包,命令如下:

npm install vux --save 

官方文档声明了vux必须配合vux-loader一起使用,所以我们需要在build/webpack.base.conf.js里参照如下代码进行配置:

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
 plugins: ['vux-ui']
})

vux-scroller实现移动端上拉加载功能过程解析

vux的Scroller组件为我们提供了上拉加载和下拉刷新等功能,虽然官方文档已经声明了不再更新此组件,但是目前的版本基本满足于我们的日常开发,所以还是可以使用的;

我们在组件中使用的时候是需要引入对应组才能进行使用的;

import { Scroller } from 'vux'

HTML视图层代码:

//height是设置滚动区域高度,vux对该组件声明的不够详细,多次调试-170是可以使用,如有更好的算法或者理解欢迎跟博主沟通交流

//on-scroller-bottom 滚动事件 这个事件在滚动的时候会进行多次触发

//scroll-bottom-offst 在底部什么位置触发事件,这里配置的是距离底部200px的地方滑动就可以触发

//ref 给scroller组件添加ref方便操作DOM,这是个小技巧,后面会用到
 <scroller height="-170" lock-x @on-scroll-bottom="onScrollBottom" :scroll-bottom-offst="200" ref="scrollerBottom">

//scroller标签内部必须包裹一层div,小技巧,不然会出现滑不到底部的问题

// 这个div的高度必须要高于底部滚动区域的高度,不然滚动不了
 
<div>



<p>滚动内容区域</p>

 </div> 





//这个div是展示提示信息的

  <div>


<div id="title" style="width:100%;text-align:center;height:30px;ling-height:30px;margin-top:20px;">上拉加载更多</div>


</div>
 </scroller>

js数据逻辑层代码:

// 上拉加载滑动的方法
  onScrollBottom () {

//onFetching是个状态变量,默认值设为false来进行控制触发事件及更改提示信息
   if (this.onFetching) {
   } else {


//默认值onFetching为false,所以提示信息首先就是加载中,我们这里用的是原生的DOM操作方法
    document.getElementById("title").innerHTML="加载中...";


 //onFetching赋值为true,下次触发的时候会触发onFetching为true的情况
    this.onFetching = true;
    setTimeout(() => {



 //此处的pageNum是当前页码,默认为1,每滑动一次都this.pageNum++然后传入参数调用接口
      this.pageNum+=1;
      this.$nextTick(() => {
      this.$refs.scrollerBottom.reset()
     })




//后台请求接口
      this.$http({
       url:"traderecords/getPersonTradDetail",
       method:"get",
       params:{
         pageSize:10,





//动态的给pageNum赋值,保证每次的参数都不一样,后台传过来的数据也不一样
         pageNum:this.pageNum,
         brandId:this.$route.query.brandId,
         date:this.value2
       }
     }).then((res)=>{ 
       console.log(res.data.data.rowMaps);




//如果接口请求成功
       if(res.data.code==200){





//接口请求成功并且返回的数组的长度<10不够一页的时候
        if(res.data.data.rowMaps.length<10){





// end是控制提示信息的,不触发滑动的时候是不展示的,默认值为false
         this.end=true;





//返回的数组长度不够一页的时候提示信息修改为没有更多数据
         document.getElementById("title").innerHTML="没有更多数据了...";
        // 当数组长度小于10时,该方法禁用
         this.$refs.scrollerBottom.disablePullup() ;
        }
        else{





//否则提示信息为加载成功
         document.getElementById("title").innerHTML="加载成功";
        }






//dataList是我声明的空数组,用concat方法把新数组和后台返回的数据进行拼接然后重新赋值给dataList,这个是关键
          this.dataList=this.dataList.concat(res.data.data.rowMaps);
          console.log(this.dataList); 






//加载成之后提示信息改为上拉加载更多
          document.getElementById("title").innerHTML="上拉加载更多";
       }





//再把onFetching的状态值改为false
       this.onFetching = false 
     })
      
    }, 500)
   }
  },

到这里,我们的上拉加载功能就实现了,一般情况下上拉加载是和下拉刷新一起用的,vux都给我们提供了组件,由于项目需要暂时只用到了上拉加载,代码看似很多,其实不是很复杂;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 #Javascript
jQuery 筛选器简单操作示例
Oct 02 #jQuery
jQuery 查找元素操作实例小结
Oct 02 #jQuery
JavaScript 作用域实例分析
Oct 02 #Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 #Javascript
JavaScript 面向对象基础简单示例
Oct 02 #Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 #Javascript
You might like
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python中协程用法代码详解
2018/02/10 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
计算机专业自荐信
2013/10/14 职场文书
高中生活自我鉴定
2014/01/18 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
护士自荐信怎么写
2015/03/06 职场文书
简历自我评价模板
2015/03/11 职场文书
工地食品安全责任书
2015/05/09 职场文书