Vue混入mixins滚动触底的方法
前言
在app端常常看到类似加载数据的动画，接下来我们来实现滚动触底加载动画提示，以及如何复用这些逻辑。
如何判断滚动触底
来看下几张图：
情况一：
当文档高度还为超过可视区域高度时，不存在滚动，所以也没有滚动触底
情况二：
当文档高度超过可视区域的高度时，还有剩余的文档没有滚动完，也就是说 可视区域高度 + 滚动高度 < 文档高度 ，此时没有达到滚动触底的条件
情况三：
文档高度大于可视区域，并且滚动到文档底部, 也就是说 可视区域高度 + 滚动高度 = 文档高度
判断是否滚动到底
经过上面三种情况的分析，我们需要拿到 可视区域的高度 , 滚动高度 , 文档高度 这三个变量来进行比较。
可视区域的高度
function getWindowHeight() {
return document.documentElement.clientHeight;
}
滚动高度
对有doctype申明的页面使用document.documentElement.scrollTop，safari特例独行：使用 window.pageYOffset
function getScrollHeight() {
return Math.max(document.documentElement.scrollTop,window.pageYOffset||0)
}
文档高度
function getDocumentTop() {
return document.documentElement.offsetHeight;
}
代码实现
触底打印
通过监听滚动事件来判断 可视区域 ， 滚动高度 ， 文档高度 的关系,实现最基础的触底加载
<div id="app">
<ul>
<li v-for="item in list" :key="item" > {{item}}</li>
</ul>
</div>
created(){
// 初始化数据
this.list = Array.from(Array(10),(item,index)=>index)
// 通过监听滚动事件来判断 可视区域 ， 滚动高度 ，文档高度的关系
window.addEventListener('scroll',()=>{
let isBottom = (getScrollHeight() + getWindowHeight()) >= getDocumentTop()
if(isBottom){
console.log('触底了',new Date())
let list = this.list
let last = list[list.length-1]
let newList = Array.from(Array(10),(item,index)=>index+last+1)
this.list.push(...newList)
}
})
}
优化和复用滚动事件逻辑
将滚动逻辑抽取成 mixins 放在 scroll.js 中。优化功能点如下：
- 增加触底距离
- 滚动事件监听事件节流
- 添加触底动画，并将 UI 样式一起封装在 scroll.js 中
模拟请求事件
为了模拟请求数据，封装了一个 Promise 一秒后返回结果
methods:{
// 返回一个 promise ，用于请求服务端数据
findDataList(){
let list = this.list
let last = list[list.length-1]
return new Promise((resolve)=>{
// 模拟服务端数据
let newList = Array.from(Array(10),(item,index)=>index+last+1)
setTimeout(() => {
resolve(newList)
}, 1000);
})
}
}
滚动事件监听
滚动事件触发，判断当前是否触底，触底了以后去执行 loadMore 发起请求拿取服务端的数据
created(){
let fn = throttle(()=>{
let isOver = (getScrollHeight() + getWindowHeight()) >= (getDocumentTop()- MIN_INSTANCE)
// 触底时进行数据加载
if(isOver){
// 创建加载组件
this.loadMore&&this.loadMore()
}
},DEALY_TIME)
window.addEventListener('scroll',fn)
},
添加触底动画
因为我们是将逻辑抽离在 mixins中，为了把触底动画也集成在里面使用 Vue.extend() 来实现编程式插入UI样式的方法。
首先定义好 loading 组件的样式
<template>
<div id="loading-alert">
<i class="el-icon-loading"></i>
<span>{{ message }}</span>
</div>
</template>
<script>
export default {
props:{
message:{
type:String,
default:'正在加载更多数据'
}
},
};
当触底时去插入这个 loading 组件
import load from './load.vue'
data(){
return {
isLoading:false,
component:null
}
},
created(){
let fn = throttle(()=>{
let isOver = (getScrollHeight() + getWindowHeight()) >= (getDocumentTop()- MIN_INSTANCE)
// 触底时进行load组件显示
if(isOver){
// 判断loading组件是否已经存在，不存在就创建一个
if(!this.component){
this.component = extendComponents(load)
}
// 创建加载组件
this.loadMore&&this.loadMore()
// 判断当前状态来控制loading的组件显示与否
if(!this.isLoading){
this.component.$el.remove()
// 将loading组件置为空
this.component = null
}
}
},DEALY_TIME)
window.addEventListener('scroll',fn)
},
详细代码
完整代码可以 点击查看 codepen 触底动画 关于上面代码中 extendComponents 方法的实现可以查看详细代码，也可以查看 Vue.extend 编程式插入组件
最后
将滚动触底的逻辑和 UI 都集成到 scroll.js 中，复用都方式可以放在 mixins 可以抽离成 v-directive,这样我们可以接受到绑定的 dom 不仅仅可以做 window 的滚动触底事件的判断，也可以 实现单个元素的滚动事件触底的监听 。后续可以在实现 v-directive 的版本。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue之Mixins(混入)的使用方法
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行"合并". 比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先. var Mymixin = { data: function(){ return { message: 'hello', foo: 'ab
-
详解Vue 中 extend 、component 、mixins 、extends 的区别
new Vue().component 首先我们来约定一个选项对象 baseOptions,后面的代码会用到. let options = { template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } }, created(){ conso
-
详解Vue.js Mixins 混入使用
Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用. 一.Mixins的基本用法 我们现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <!DOCTYPE html> <html lang="en"> <h
-
vue的mixins属性详解
首先先给出官网 https://vuejs.org/v2/guide/mixins.html 今天在开发项目的时候要改变一个标签的属性,因为项目中有多个地方都要改(业务逻辑相同),所以就看有没办法只改变一个地方,把方法加进去,最后找官网就发现这个属性. 下面是我的-mixin.js 文件 import {mapGetters, mapMutations, mapActions} from 'vuex' export const playlistMixin = { computed: { ...m
-
vue mixins组件复用的几种方式（小结）
最近在做项目的时候,研究了mixins,此功能有妙处.用的时候有这样一个场景,页面的风格不同,但是执行的方法,和需要的数据非常的相似.我们是否要写两种组件呢?还是保留一个并且然后另个一并兼容另一个呢? 不管以上那种方式都不是很合理,因为组件写成2个,不仅麻烦而且维护麻烦:第二种虽然做了兼容但是页面逻辑造成混乱,必然不清晰:有没有好的方法,有那就是用vue的混合插件mixins.混合在Vue是为了提出相似的数据和功能,使代码易懂,简单.清晰. 1.场景 假设我们有几个不同的组件,它们的工作是切换状
-
在Vue.js中使用Mixins的方法
一个很常见的场景: 有两个非常相似的组件, 它们拥有非常相似的基本功能, 但是它们之间又有足够的不同的地方, 该如何选择呢? 我们是应该将它们分成两个完全不同的组件呢? 还是创建一个基础组件, 然后定义足够多的props以方便区分使用场景? 这两种方式都不是完美的: 如果你将它们分成两个完全不同的组件, 在需求变化(功能变化)时, 可能会增加需要同时修改两个组件的风险, 这违反了"DRY"的前提. 另一方面, 太多的props很快会让人变得凌乱, 并且, 迫使维护人员, 甚至是你自己,
-
Vue中的混入的使用(vue mixins)
使用场景: 例如我们在Vue单页面开发的时候当多个组件中都需要下拉刷新,或者使用的都是一个方法的时候,我们就可以使用vue mixins进行封装调用,以及继承,具体看代码. 选项合并 var mixin = { data: function () { return { message: 'hello' } }, created:function(){ console.log('我是mixins中的created') }, methods:{ show:function(num){ console
-
Vue使用mixins实现压缩图片代码
本文介绍了Vue使用mixins实现压缩图片代码,分享给大家,具体如下: 图片压缩 创建mixins image-compress.js export default { methods: { /** * 检查并压缩图片大小 */ checkAndHandleCompression(file) { return new Promise((resolve, reject) => { this.imgBase64(file, (image, canvas) => { let maxSize = 2
-
详解vue mixins和extends的巧妙用法
vue提供了mixins.extends配置项,最近使用中发现很好用. 混合mixins和继承extends 看看官方文档怎么写的,其实两个都可以理解为继承,mixins接收对象数组(可理解为多继承),extends接收的是对象或函数(可理解为单继承). 继承钩子函数 const extend = { created () { console.log('extends created') } } const mixin1 = { created () { console.log('mixin1
-
Vue混入mixins滚动触底的方法
前言 在app端常常看到类似加载数据的动画,接下来我们来实现滚动触底加载动画提示,以及如何复用这些逻辑. 如何判断滚动触底 来看下几张图: 情况一: 当文档高度还为超过可视区域高度时,不存在滚动,所以也没有滚动触底 情况二: 当文档高度超过可视区域的高度时,还有剩余的文档没有滚动完,也就是说 可视区域高度 + 滚动高度 < 文档高度 ,此时没有达到滚动触底的条件 情况三: 文档高度大于可视区域,并且滚动到文档底部, 也就是说 可视区域高度 + 滚动高度 = 文档高度 判断是否滚动到底 经过上
-
Vue混入mixins分发组件可复用功能
目录 前言 一.后端返回数据与字典数据之前的转换 二.文件下载的混入 三.Element表格最后一行合计数据的混入 前言 那就是说,你可以单独写个逻辑文件,默认导出一个对象,对象里面可以包含data.created.mounted.methods 等vue模板文件中的逻辑对象.接着可以将这个对象引入到多个vue模板中进行功能复用,从而达到功能模块的逻辑封装,便于使用及后期维护. 这里我举一些日常开发中最常用的示例来说,更多的是 methods 的混入. 一.后端返回数据与字典数据之前的转换 通常
-
Vue中添加滚动事件设置的方法详解
一.问题发现 在看Vue的事件文档中,测试scroll事件发现如下是行不通的,触发不了scroll事件, 经过一番搜寻未找到原因,不过找到了另外两种在Vue中设置滚动事件. <div @scroll='showOut'></div> 二.原因分析 暂无 三.解决办法 1.直接利用mousewheel事件替代scroll事件 <div @mousewheel='showOut'></div> mousewheel鼠标滚轮,显而易见动动鼠标滚轮就能触发事件,但是
-
vue中混入mixins的使用方法
目录 前言 使用方法 总结 前言 Vue中有一个设置项叫做混入 (mixins), 它的使用是用来做代码复用的.同时, 这个mixins 也分为局部混入和全局混入 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项.应用场景 下面先说一下 mixins 的应用场景, 假设现在我们两个组件, 当这两个组件被点击时,
-
vue实现触底查询功能
本文实例为大家分享了vue实现触底查询功能的具体代码,供大家参考,具体内容如下 1.使用vant-list组件相关内容如下: 2.对象绑定值的默认值: 3.查询方法: 完整代码: methods: { getdata() { let status=3; this.queryParams.params={ status:status, passFactory: this.$store.state.user.werksName } let params = JSON.parse(JSON.strin
-
Vue中mixins混入的介绍与使用详解
目录 一.来自官网的描述 二.如何创建Mixins 三.项目中如何使用混入 四.与vuex的区别 五.与公共组件的区别 一.来自官网的描述 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 二.如何创建Mixins 在src目录下创建一个mixins文件夹,文件夹下新建一个myMixins.js文件.前面我们说了mixins是一个js对象,所以应该以对象的形式来定义my
-
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由
-
基于vue监听滚动事件实现锚点链接平滑滚动的方法
基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne
-
vue.js-div滚动条隐藏但有滚动效果的实现方法
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐
-
Vue组件实现触底判断
本文实例为大家分享了Vue组件实现触底判断的具体代码,供大家参考,具体内容如下 非常简陋的代码,以后有空回来完善 子组件代码: <template> <div class="scroll"></div> </template> <script> export default { name:'Scroll', methods:{ scrollEvent(){ if (document.documentElement.scroll