vue滚动分页加载,vue 前端分页
这篇文章主要为大家详细介绍了某视频剪辑软件实现网滚动条分页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue web滚动条分页的具体代码，供大家参考，具体内容如下
1.在你的帮助类里面新建一个slidePagination.js文件
2.将下面的代码复制进去
从“vue”导入某视频剪辑软件
//聚焦指令
//注册一个全局自定义指令`五-焦点
//垂直聚焦
Vue.directive(focus ，{
//当被绑定的元素插入到数字正射影像图中时……
插入：函数(el) {
//聚焦元素
埃尔。焦点()；
}
})
//表格下拉加载数据监听
Vue.directive(loadmore ，{ //懒加载========该方法为埃尔表下拉数据监听事件
bind (el，binding) {
const select wrap=El。查询选择器(.El-table _ _ body-wrapper’)
选择换行。addevent侦听器( scroll ，function () {
让符号=100
恒定滚动距离=this。滚动高度-这个。滚动顶部-这个。客户身高
if (scrollDistance=sign) {
binding.value()
}
})
}
})
//以下是其他帮助类
//v-dialogDragWidth:弹窗宽度拖大拖小
Vue.directive(dialogDragWidth ，{
bind (el，binding，vnode，oldVnode) {
const dragDom=binding。价值。$ El。查询选择器(.El-dialog’)；
el.onmousedown=(e)={
//鼠标按下，计算当前元素距离可视区的距离
const disX=e . clientx-El。向左偏移；
文档。onmousemove=function(e){
e。防止默认()；//移动时禁用默认事件
//通过事件委托，计算移动的距离
const l=e . clientx-disX；
德拉多姆。风格。width=` $ { l } px
}
文档。onmouseup=函数(e){
document.onmousemove=null
document.onmouseup=null
}
}
}
})
//弹出框可拖拽
//v对话框拖动
Vue.directive(dialogDrag ，{
bind (el，binding，vnode，oldVnode) {
const dialogHeaderEl=El。查询选择器(.El-dialog _ _ header’)；
const dragDom=el.querySelector( .El-dialog’)；
dialogheaderel。风格。cursor= move
//获取原有属性ie dom元素。当前样式火狐谷歌window.getComputedStyle(dom元素，null)；
const sty=dragDom。当前样式 窗口。getcomputedstyle(dragDom，null)；
dialogheaderel。onmousedown=(e)={
//鼠标按下，计算当前元素距离可视区的距离
let oevent=e window.event
const disX=OE vent。clientx-dialogheaderel。向左偏移；
const disY=OE ventclienty-dialogheaderel。offsettop
//获取到的值带像素正则匹配替换
设styL=0，styT=0；
//注意在工程师协会中第一次获取到的值为组件自带50% 移动之后赋值为像素
如果(麦粒肿。向左。包括( % ){
styL=文档。身体。客户端宽度*(sty。向左。替换(/\ %/g， )/100)；
styT=文档。身体。客户身高*(麦粒肿。顶端。替换(/\ %/g， )/100)；
}否则{
styL=sty.left！=自动？(sty.left.replace(/\px/g， ):(dialogheaderel。向左偏移)；
styT=sty.top！=自动？(sty.top.replace(/\px/g， ):(dialogheaderel。offsettop)；
}
文档。onmousemove=function(e){
//通过事件委托，计算移动的距离
let oevent=e window.event
const l=OE vent。clientx-disX；
const t=o事件。客户-disY；
//移动当前元素
德拉多姆。风格。left=` $ { l styL } px
德拉多姆。风格。top=` $ { t styT } px
//将此时的位置传出去
//binding.value({x:e.pageX，y:e.pageY})
}
文档。onmouseup=函数(e){
document.onmousemove=null
document.onmouseup=null
}
}
}
})
3.将此文件在主页。射流研究…中引用
"导入"。/utils/slide分页；//双引号中的内容为你文件所在位置
4.具体参考，第页
模板
el表条纹
:data= prescription recordslist //数据源
V-loadmore=loadMore //此注册的侦听方法，
V-loading=loadingBox//加载控制
Height=700px//height。注：如果没有给出高度。可能没有滚动条。没有滚动条，滚动分页就不存在。
边界
.//省略表格的列
/el-table
/模板
data () {
返回{
//分页属性，根据你的后台要求。
模块页面：{
页面：{
CurrentPage: 1，//当前页面
PageSize: 50，//每页显示的数字
Total: 0，//数据的总数
}
},
//数据源
列表：[]，
//el-table加载动画控件
假的，
//调用方法控件
loadSign:假，
};
},
方法：{
init () {
让那个=这个；
this . module page . page . current page=1；//在多次加载的情况下，调用此方法需要将当前页面重置为1。
this . prescription recordslist=[]；//重置
This.post(请求地址，this.modulepage)。然后(res={//this.post()是自打包的请求方法。
if (res.data.errorCode！=00) {
这个。$ message . warning(RES . data . error msg)；
返回；
}
this . prescription recordslist=RES . data . SPR body . list；//返回的数据源
that . module page . page . total=RES . data . SPR body . total；//返回的数据总数
that.loadSign=true//添加控件
})
},
loadMore () {
让那个=这个；
If (this.loadSign) {//为真时输入方法
//判断数据是否已经加载，然后返回不再请求的后台加载数据。
if(this . module page . page . current page this . module page . page . total/this . module page . page . pagesize){
返回；
}
//加载数据时，更新控制字段，避免多次触发调用。
this.loadSign=false
this.loadingBox=true//加载弹出，动画过度
this . module page . page . current page；//增加当前的页数
setTimeout(()={
/**
*回调加载数据区
*/
that . load page value()；
}, 500)
}否则{
返回；
}
},
//回调加载数据区
loadPageValue () {
让那个=这个；
This.post(请求地址，this.modulePage)。然后(res={
if (res.data.errorCode！=00) {
这个。$ message . warning(RES . data . error msg)；
返回；
}
//将寻呼查询数据拼接到初始化查询数据上。
this . prescriptionrecordslist=this . prescriptionrecordslist . concat(RES . data . SPR body)；
that . module page . page . total=RES . data . SPR body . total；//这里我用了很多次同样的方法，继续返回总数，防止数据发生变化。
that.loadSign=true//加载完成后，复位控件会变为可以继续加载的状态。
that.loadingBox=false//关闭过度动画
})
}
},
已创建(){
this . init()；//初始化加载数据
}
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。