“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发:
在前端项目的 components 文件夹下新建 pullRefreshView 文件夹,在其中新建组件 index.vue:(它代表“整个屏幕”,通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新)
首先需要编写下拉刷新组件的 template,这里用到 <slot>,代码如下:
<template> <div class="pullRefreshView" @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"> <div ref="circleIcon" class="circle-icon"> <div ref="circleIconInner" class="circle-icon-inner"></div> </div> <slot></slot> </div> </template>
上面代码中,最外层使用了一个 div 用来包裹,作为事件绑定的容器,同时新建一个圆形 icon 的 div .circleIcon,我们将此 icon 样式设置在屏幕外,达到隐藏的效果,代码如下:
<style> .circle-icon{ position: absolute; left: 0.625rem; top: -1.875rem; } .circle-icon-inner{ width: 1.5625rem; height: 1.5625rem; background-image: url('圆圈图片地址'); background-size: cover; } .circle-rotate{ animation: xuzhuan .8s linear infinite; } @keyframes xuzhuan{ 0%{} 25%{} 50%{} 75%{} 100%{} } </style>
下拉刷新组件的 UI 基本编写完毕,接下来就要绑定事件了,通过上述分析,加上我们之前章节开发图片查看器的原理,我们需要用到移动端 touchstart,touchmove,touchend 事件,可以实现下拉刷新效果。
首先,监听 touchstart 事件:
touchstart(evt){ this.pullRefresh.dragStart=evt.targetTouches[0].clientY this.$refs.circleIcon.style.webkitTransition='none' },
在 touchstart 事件中,我们主要做的是记录一些初始值,包括手指第一次接触屏幕时的位置,然后将圆形 icon 的动画效果先隐藏。
然后,监听 touchmove 事件:
touchmove(evt){ if(this.pullRefresh.dragStart===null){ return } let target=evt.targetTouches[0] // 向上滑为正,向下拉为负 this.pullRefresh.percentage=(this.pullRefresh.dragStart-target.clientY)/window.screen.height let scrollTop=document.documentElement.scrollTop || document.body.scrollTop if(scrollTop===0){ //this.pullRefresh指data中的pullRefresh对象(下方有),而evt即事件event参数 if(this.pullRefresh.percentage<0 && evt.cancelable){ evt.preventDefault() this.pullRefresh.joinRefreshFlag=true let translateY=-this.pullRefresh.percentage*this.pullRefresh.moveCount if(Math.abs(this.pullRefresh.percentage)<=this.pullRefresh.dragThreshold){ let rotate=translateY/30*360 this.$refs.circleIcon.style.webkitTransform='translate3d(0'+translateY+'px,0) rotate('+rotate+'deg)' } }else{ if(this.pullRefresh.joinRefreshFlag===null){ this.pullRefresh.joinRefreshFlag=false } } }else{ if(this.pullRefresh.joinRefreshFlag===null){ this.pullRefresh.joinRefreshFlag=false } } },
在 touchmove 事件里,我们主要做的是根据手指移动的量来实时将圆形 icon 移动并旋转,这里有几点确实要说明一下:
监听 touchend 事件:
touchend(evt){ if(this.pullRefresh.percentage===0){ return } if(Math.abs(this.pullRefresh.percentage)>this.pullRefresh.dragThreshold && this.pullRefresh.joinRefreshFlag){ this.$emit('onRefresh') this.$refs.circleIconInner.classList.add('circle-rotate') setTimeout(()=>{ this.$refs.circleIconInner.classList.remove('circle-rotate') this.$refs.circleIcon.style.webkitTransition='330ms' this.$refs.circleIcon.style.webkitTransform='translate3d(0,0,0) rotate(0deg)' },700) }else{ if(this.pullRefresh.joinRefreshFlag){ this.$refs.circleIcon.style.webkitTransition='330ms' this.$refs.circleIcon.style.webkitTransform='translate3d(0,0,0) rotate(0deg)' } } this.pullRefresh.joinRefreshFlag=null this.pullRefresh.dragStart=null this.pullRefresh.percentage=0 }
在 touchend 事件中,我们主要是做一些动画执行的操作,大家可以看看代码中的注释,这里说明一下:
最后,我们看下【data】中都有什么:
data(){ return{ pullRefresh:{ dragStart:null, //开始抓取标志位 percentage:0, //拖动量(百分比) dragThreshold:0.3, //临界值 moveCount:200, //位移系数,可以调节圆形图片icon的运动速率 joinRefreshFlag:null, //进入刷新状态的标志位(true) } } },
补充:slot
<template>中为什么有<slot>?
slot有三种形式:
可能我们一般用具名slot的时候比较多,但是第一种也格外好用——正因为它没有名字,所以引用这个组件的另一个组件中包裹其中的所有内容都归这个slot所有:
假定my-component组件中有如下模板:
<div> <h2>我是子组件</h2> <slot>只有在没有内容分发的情况下这句话才会出现</slot> </div>
父组件模板:
<div> <h1>这是父组件地盘</h1> <my-component> <p>这是一些初始内容</p> <p>这是更多的内容</p> </my-component> </div>
最后就会被渲染成这样:
<div> <h1>这是父组件地盘</h1> <div> <h2>我是子组件</h2> <p>这是一些初始内容</p> <p>这是更多的内容</p> </div> </div>
所以这里这样做,就是为了在“父组件”中调用时让“下拉的动画”更自然,但又不会增加一个文件的负担。
到此这篇关于vue下拉刷新组件的开发及slot的使用详解的文章就介绍到这了,更多相关vue下拉刷新组件slot使用内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!
本文向大家介绍Android下拉刷新以及GridView使用方法详解,包括了Android下拉刷新以及GridView使用方法详解的使用技巧和注意事项,需要的朋友参考一下 GridView是类似于ListView的控件,只是GridView可以使用多个列来呈现内容,而ListView是以行为单位,所以用法上是差不多的。 主布局文件,因为要做下拉刷新,所以加了一个ProgressBar,GridVi
本文向大家介绍Swift开发之使用UIRefreshControl实现下拉刷新数据及uirefreshcontrol使用,包括了Swift开发之使用UIRefreshControl实现下拉刷新数据及uirefreshcontrol使用的使用技巧和注意事项,需要的朋友参考一下 想要下拉刷新表格数据,上拉加载新数据,网上有许多第三方的实现类。 而如果仅仅需要实现下拉刷新数据的话,那么使用 UIRefr
本文向大家介绍Android开发之无痕过渡下拉刷新控件的实现思路详解,包括了Android开发之无痕过渡下拉刷新控件的实现思路详解的使用技巧和注意事项,需要的朋友参考一下 相信大家已经对下拉刷新熟悉得不能再熟悉了,市面上的下拉刷新琳琅满目,然而有很多在我看来略有缺陷,接下来我将说明一下存在的缺陷问题,然后提供一种思路来解决这一缺陷,废话不多说!往下看嘞! 1.市面一些下拉刷新控件普遍缺陷演示 以直
本文向大家介绍详解vue使用插槽分发内容slot的用法,包括了详解vue使用插槽分发内容slot的用法的使用技巧和注意事项,需要的朋友参考一下 将父组件的内容放到子组件指定的位置叫做内容分发 单个插槽 父组件app.vue 子组件testSlot.vue 效果图: 多个插槽也叫具名插槽 具名插槽就是将某个名字的内容插到子组件对应名字里面去 父组件app.vue 子组件testSlot.vue 作用
本文向大家介绍详解vue slot插槽的使用方法,包括了详解vue slot插槽的使用方法的使用技巧和注意事项,需要的朋友参考一下 官方文档其实已经讲得很详细,我根据文档,把官方的小案例实现了一下,这样更直观 单个slot使用最简单,也是最常用的,当我们定义了一个子组件,父组件在使用的这个组件的时候,想在内部自定义一些初始化数据,这时候就可以用slot实现。 具名slot只是给slot加了name
本文向大家介绍Listloading.js移动端上拉下拉刷新组件,包括了Listloading.js移动端上拉下拉刷新组件的使用技巧和注意事项,需要的朋友参考一下 listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作