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

2020-06-12 21:07:08易采站长站整理

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

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


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>