vue3项目，vant组件库中的list组件为什么下滑的时候重新加载，页面会回到最顶层

软件 2026-03-13

vant-list 一直触发 onload

父元素高度不要设置 100%,设置 100vh List 初始化后会触发一次 load 事件，用于加载第一屏的数据，这个特性可以通过immediate-check属性关闭。根据有无数据来控制是否展示van-list，因为有时候页面初始化没有数据时vant-list也会触发一次非加载中，loading为false，此时会根据列表滚动位置判断是否触发load事件（列表内容不足一屏幕时，会直接触发）加载中，loading为true，表示正在发送异步请求，此时不会触发load事件加载完成，finished为true，此时不会触发load事件在每次请求完毕后，需要手动将loading设置为f

在vue.js中整合vux如何实现上拉加载下拉刷新

这篇文章主要给大家介绍了关于vue.js整合vux中上拉加载下拉刷新的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们一起学习学习吧。
前言
Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库，开发初衷是满足公司的微信端表单需求，因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已)。于是用 vue 重构了表单组件，后来一发不可收拾把其他常用组件也一并开发了。
相比于 React 还是更喜欢用 Vue ，除了目前社区组件不多，周边构建工具还是比较完善的(作者也特别勤奋)。
下面话不多说了，来一看看详细的介绍吧。
先上图
创建项目
使用vue-cli 创建一个vue项目
安装vux，可以参考：vux快速入门
配置
官方文档地址
打开后会看到一段话
该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。建议使用第三方相关组件，相关 issue 将不会处理。
不知道作者为啥不维护了，明明需求挺多的
我没有用demo里的 LoadMore 组件，用的是 Scroller里自带的 use-pullup, use-pulldown 下面是我的配置

use-pulldown :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refresh"
lock-x ref="scrollerBottom" height="-48">

请求接口遍历数据
接口服务用的是mock.js生成的数据，可以看一下这篇文章：使用mock.js随机数据和使用express输出json接口
安装 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部分补全

完整代码

上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
利用node.js等技术如何实现登录注册功能？
在vue中如何使用filter过滤器
在HTTP中gzip压缩问题
前端算法中有关文字避让的问题（详细教程）

怎样使vue项目刷新页面

这次给大家带来怎样使vue项目刷新页面，使vue项目刷新页面的注意事项有哪些，下面就是实战案例，一起来看一下。
1.场景
在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。
2.遇到的问题
1. 用vue-router重新路由到当前页面，页面是不进行刷新的
2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好
3.解决方法
provide / inject组合
作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
App.vue:
声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载
tableList.vue:
在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加...）,直接this.reload()调用，即可刷新当前页面。
4.provide / inject 用法
provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名
提示：provide和inject绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
如何使用v-model与promise两种方式实现vue弹窗组件

如何使用Vue二次封装axios插件

vue列表数据如何滚动刷新十条

要实现Vue列表数据的滚动刷新十条，可以借助Vue的计算属性和监听滚动事件来实现。首先，在Vue的数据中定义一个变量来表示当前已加载的数据条数，比如`loadedItems`，初始值为0。然后，在模板中使用`v-for`指令来遍历列表数据，并通过计算属性来限制遍历的条数为`loadedItems + 10`。接着，在mounted钩子函数中监听滚动事件，当滚动到页面底部时，将`loadedItems`的值加上10，即可触发计算属性的更新，实现滚动刷新十条数据。原因解释：通过监听滚动事件，可以实时监测用户的滚动行为，当滚动到页面底部时，就可以触发加载新的数据的操作。而通过计算属性，我们可以动态

怎样进行Vue拖拽组件开发

这次给大家带来怎样进行Vue拖拽组件开发，进行Vue拖拽组件开发的注意事项有哪些，下面就是实战案例，一起来看一下。
为什么选择Vue?
主要原因：对于前端开发来说，兼容性是我们必须要考虑的问题之一。我们的项目不需要兼容低版本浏览器。项目本身也是一个数据驱动型的。加之，Vue本身具有以下主要特性：
?使用虚拟DOM；
?轻量级框架；
?高效的数据绑定；
?灵活的组件系统；
?完整的开发生态链。
这就是我们为什么选择Vue框架的一些原因。
为什么要封装成一个Vue组件？
主要目的是可提高代码的复用性和可维护性。
?复用性：组件化后，一些样式和逻辑均通过配置参数的方式去差异化体现，所以参数的可配置性提高了组件的复用率和灵活性。
?可维护性：组件化后，组件内部的逻辑只对组件负责，外部的逻辑只通过配置参数适配，所以提高了代码的逻辑清晰度，可以快速定位代码出现问题的地方。
组件化搭建页面图示：
上图可看出，在Vue中，所谓组件化搭建页面，简单来说，页面实际上是由一个个功能独立的组件搭建而成。这些组件之间可以组合、嵌套，最终形成了我们的页面。
组件构成
下面是一个完成的组件构成：
// 组件内模板
// 组件内逻辑代码

// 组件内封装的样式
开发Vue移动拖拽组件为例
拖拽原理
手指在移动的过程中，实时改变元素的位置即top和left值，使元素随着手指的移动而移动。
拖拽实现
?开始拖动时：获取到接触点相对于整个视图区的坐标clientX，clientY；获取元素距离视图上侧和左侧的距离 initTop，initLeft；计算接触点距离元素上侧和左侧的距离 elTop = clientY - initTop, elLeft = clientX - initLeft；
?拖动过程中：通过 currTop = clientY - elTop, currLeft = clientX - elLeft实时获取元素距离视图上侧和左侧的距离值，并赋值给元素，使元素跟着手指的移动而动起来；
?拖动结束，定位元素。
Vue中的实现
使用Vue，最大的不同之处是我们几乎不去操作DOM，要充分利用Vue的数据驱动来实现拖拽功能。本例中，我们只需在垂直方向上拖动元素，所以只需考虑垂直方向的移动即可。
上图中，通过data中的dragList渲染拖拽区域列表，代码如下：
template:

拖拽可调整顺序

{{item.txt}}

script:

export default {
data() {
return {
dragList:null
}
},
created() {
this.dragList = [
{
isDrag: false,
txt: '列表1',
isShow: false
}
...
]
},
}假设我们将元素从位置1拖至位置3，本质上是数组的顺序发生了改变。这就有必要提一下Vue的最大特性：数据驱动。
所谓的数据驱动就是当数据发生变化时，通过修改数据状态，使用户界面发生相应的改变，开发者不需要手动的去修改DOM。
Vue的数据驱动是通过MVVM这种框架来实现的，MVVM框架主要包含3个部分:Model、View、Viewmodel。
_ Model：数据部分；
_ View：视图部分；
_ Viewmodel：连接视图与数据的中间件。
顺着这个思路走下去，我们知道：
_ oldIndex：元素在数组中的初始索引index；
_ elHeight：单个元素块的高；
_ currTop = clientY - elTop：元素在拖动过程中距离可视区上侧距离；
_ currTop - initTop > 0：得知元素是向上拖拽；
_ currTop - initTop < 0：得知元素是向下拖拽。
我们以向下拖拽来说：
_ 首先，我们要在拖拽结束事件touchend中判断元素从拖动开始到拖动结束时拖动的距离。若小于某个设定的值，则什么也不做；
_ 然后，在touchmove事件中判断，若(currTop - initTop) % elHeight>= elHeight/2成立，即当元素拖至另一个元素块等于或超过1/2的位置时，即可将元素插入到最新的位置为newIndex = (currTop - initTop) / elHeight + oldIndex。
_ 最后，若手指离开元素，那么我们在touchend事件中，通过this.dragList.splice(oldIndex, 1)，this.dragList.splice(newIndex, 0, item)重新调整数组顺序。页面会根据最新的dragList渲染列表。
写到这里，我们俨然已经用Vue实现了移动端的拖拽功能。但是拖拽体验并不好，接下来，我们对它进行优化。
优化点：我们希望，在元素即将可能落到的位置，提前留出一个可以放得下元素的区域，让用户更好的感知拖拽的灵活性。
方案：（方案已被验证是可行的）将li的结构做一下修改，代码如下：

// 向上拖拽时留空
{{item.txt}}

// 向下拖拽时留空

?拖拽开始：将元素的定位方式由static设置为absolute，z-index设置为一个较大的值，防止元素二次拖拽无效；
?拖拽过程中：将元素即将落入新位置的那个li下p的item.isShow设置为true，其他li下p的item.isShow均设置为false;
?拖拽结束：将所有li下p的item.isShow 均设置为false，将元素定位方式由absolute设置为static。
贴一段伪代码：
touchStart(e){
// 获取元素距离视口顶部的初始距离
initTop = e.currentTarget.offsetTop;
// 开始拖动时，获取鼠标距离视口顶部的距离
initClientY = e.touches[0].clientY;
// 计算出接触点距离元素顶部的距离
elTop = e.touches[0].clientY - initTop;
},
touchMove(index, item, e){
// 将拖拽结束时，给元素设置的static定位方式移除，防止元素二次拖拽无效
e.target.classList.remove('static');
// 给拖拽的元素设置绝对定位方式
e.target.classList.add('ab');
// 获取元素在拖拽过程中距离视口顶部距离
currTop = e.touches[0].clientY - elTop;
// 元素在拖拽过程中距离视口顶部距离赋给元素
e.target.style.top = currTop ;
// 获取元素初始位置
oldIndex = index;
// 获取拖拽元素
currItem = item;
// 若元素已经拖至区域外
if(e.touches[0].clientY > (this.dragList.length) * elHeight){
// 将元素距离上侧的距离设置为拖动区视图的高
currTop = (this.dragList.length) * elHeight;
return;
}
// 向下拖拽
if(currTop > initTop ){
// 若拖拽到大于等于元素的一半时，即可将元素插入到最新的位置
if((currTop - initTop) % elHeight>= elHeight / 2){
// 计算出元素拖到的最新位置
newIndex = Math.round((currTop - initTop) / elHeight) + index;
// 确保新元素的索引不能大于等于列表的长度
if(newIndex < this.dragList.length){
// 将所有列表留空处隐藏
for(var i = 0;i< this.dragList.length;i++){
this.dragList[i].isShow = false;
}
// 将元素即将拖到的新位置的留空展示
this.dragList[newIndex].isShow = true;
}
else {
return;
}
}
}
// 向上拖拽，原理同上
if(currTop < initTop){ ... } }, touchEnd(e){ // 若拖动距离大于某个设定的值，则按照上述，执行相关代码 if(Math.abs(e.changedTouches[0].clientY - initClientY ) > customVal){
this.dragList.splice(oldIndex, 1);
this.dragList.splice(newIndex, 0, currItem);
for(var i = 0;i< this.dragList.length;i++){
this.dragList[i].isShow = false;
this.dragList[i].isShowUp = false;
}
}
e.target.classList.remove('ab');
e.target.classList.add('static');
}优化后，如下图所示：
以上便是用Vue实现移动端拖拽组件的过程。我们知道，有些项目是需要在PC端用Vue实现此功能。这里简单提一下PC与移动端的区别如下：
?PC端可以使用的事件组有两种：第一种：H5新特性draggable，dragstart，drag，dragend；第二种：mousedown，mousemove，mouseup;
?PC端获取鼠标坐标是通过e.clientX，clientY，区别于移动端的e.touches[0].clientX，e.touches[0].clientY。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
怎样操作vue中$emit 与$on父子与兄弟组件通信

如何使用node命令方式启动修改端口

标签：前端开发信息技术 JavaScript 编程语言软件开发