本文中，vue-cli vux-scroller实现了移动终端的上拉加载功能：

纠错声明：网上查阅资料显示，很多人把vux和vuex混为一谈。这里我们来解释一下，vuex是数据状态管理工具vue framework的一个组件，vux是一个移动UI组件库。

Vux(官方文档：https://doc.vux.li/zh-CN/)是基于WeUi和vue(2.x)的移动UI组件库，主要服务于微信页面。基于webpack vue-loader的vux 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 vuxlloader=require(' vux-loader ')const webpackkconfig=original config//原始模块. exports代码被分配给变量webpackconfigmodule。exports=vuxloader . merge(webpackconfig，{ plugins :[' vux-ui ']})

vux的Scroller组件为我们提供了上拉加载、下拉刷新等功能。虽然官方文件已经声明这个组件不会更新，但是目前的版本基本满足我们的日常开发，所以还是可以使用的；

当我们在组件中使用它时，我们需要引入相应的组来使用它。

从“vux”html视图层代码导入{Scroller}:

//height是设置滚动区域的高度。vux没有足够详细地声明组件。调试-170多次都可以使用。如果有更好的算法或者理解，欢迎大家和博主交流。//滚动时会多次触发上滚下滚事件。//底部触发事件在哪里？这里配置的是从底部滑动200px的距离可以触发//ref。添加引用scroller组件来方便DOM的操作是一个小技巧。scroll height='-170 ' lock-x @ on-scroll-bottom=' on scroll-bottom ' : scroll-bottom-offer=' 200 ' ref=' scroll-bottom '/scroll标签的内部必须用一层div进行包装。Tips，否则会出现滑不到底的问题。//此div的高度必须高于底部滚动区的高度，否则无法滚动divp滚动内容区。/p /div //这个div是显示提示信息的div ID=' title ' style=' width 3360100%；文本对齐：居中；高度：30 px；凌高：30 px；' margin-top :20 px；'上拉并加载更多/div/div /scrollerjs数据逻辑层代码：

//拉起load sliding方法onscroll bottom(){//onfletching为状态变量，默认值设置为false以控制触发事件并更改提示信息如果(this . onfletching){ } else {//默认值onfletching为false，则提示信息为先加载。我们使用原生的DOM操作方法文档。getelementbyid ('title ')。innerhtml='正在加载.'；//onfletching赋值为true，下一次被触发时，将触发onfletching为true。this.onFetching=trueSetTimeout(()={//pageNum这里是当前页码，默认值为1。在每张幻灯片中传递this.pageNum，然后传入调用接口this.pageNum=1的参数；这个。$ nexttick (()={this。$ refs . scroller bottom . reset()})//后台请求此接口。$ http({ URL : ' trade records/getpersonatradedetail '，method:' get '，Params: { pageSize:10，//动态给pageNum赋值，保证每次参数不一样，后台传输的数据也不一样。佩吉纳姆，布兰迪：这。$ route.query.brandid，date:this.value2 } })。然后((RES)={ console . log(RES . data . data . row maps)；//如果接口请求成功如果(res.data.code==200){//如果接口请求成功且返回数组长度10小于一页，如果(RES . data . data . rowmaps . length 10){//END控制提示信息，不触发滑动时不显示。默认值为false this.end=true//当返回的数组长度小于一页时，提示信息变为无数据文档。getElementByid ('title ')。innerHTML='没有更多数据.'；//当数组长度小于10时，此方法禁用此功能。$ refs . scroller bottom . disablepulp()；} else{//否则，提示消息为document.getelementbyid ('title ')。innerhtml=“加载成功”；}//dataList是我声明的空数组。使用concat方法将新数组与后台返回的数据拼接，然后将其重新分配给dataList。这是关键。datalist=this。数据列表。concat (res.data.data.rowmaps)。console . log(this . DataList)；//加载后，消息会变为拉起，加载更多文档。getElementByid ('title ')。innerHTML='拉高以加载更多内容'；}//然后将onFetching的状态值更改为false。提取时=false})}，500)}}。至此，我们的上拉加载功能实现了。一般上拉加载和下拉刷新一起使用，vux为我们提供组件。因为项目暂时需要使用上拉加载，代码看似很多，但并不是很复杂。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。