vue实现点击上下按钮或上下箭头，列表上下滚动功能及特效

组件使用li列表，将需要滚动的块包装为div，设置高度

<div><ul><div class="menu-div" id="menu"><li v-for="i in list" :key="i.value">{{i.value}}</li></div></ul><el-button @click="handleScroll('up')" size="mini" type="primary">向上</el-button><el-button @click="handleScroll('down')" size="mini" type="primary">向下</el-button></div>

css

.menu-div{margin: 16px 0;height: 200px;overflow-y: hidden;ul li {list-style: none;}
}

具体滚动方法

// 生成listhandleList() {for (let i = 0; i < 100; i++) {this.list.push({label: i + 1,value: i + 1})}},// 滚动效果easeInQuad(curtime,begin,end,duration){let x = curtime/duration; //x值let y = x*x; //y值return begin+(end-begin)*y; //套入最初的公式},easeOutQuad(curtime,begin,end,duration){let x = curtime/duration;         //x值let y = -x*x + 2*x;  //y值return begin+(end-begin)*y;        //套入最初的公式},easeInoutQuad(curtime,begin,end,duration){if(curtime<duration/2){ //前半段时间return this.easeInQuad(curtime,begin,(begin+end)/2,duration/2);//改变量和时间都除以2}else{let curtime1 = curtime-duration/2; //注意时间要减去前半段时间let begin1 = (begin+end)/2;//初始量要加上前半段已经完成的return this.easeOutQuad(curtime1,begin1,end,duration/2);//改变量和时间都除以2}},// 滚动handleScroll (action) {let menuScroll = document.getElementById('menu')// 每次滚动距离let dis = 60;// 滚动时长let duration = 500;// 初始距离let preX = 0;let startTime = new Date().getTime();let func = ()=>{let nowTime = new Date().getTime();let t = nowTime - startTime;// 当时长大于500时，停止滚动if (t > duration){return;}let s = this.easeInoutQuad(t, 0, dis, duration);// 每次滚动距离let x = s - preX;preX = s;if (action === 'up') {// 向上滚动menuScroll.scrollTop -= x} else if (action === 'down') {// 向上滚动menuScroll.scrollTop += x}// 请求滚动requestAnimationFrame(func)}requestAnimationFrame(func)}

vue实现点击上下按钮或上下箭头，列表上下滚动功能及特效相关推荐

vue实现点击不同按钮展示不同内容
效果是:在同一个页面,点击不同按钮,展示不同内容(内容也是在同意页面) 方法是:借助v-show渲染不同的class属性步骤: 1.先写两个按钮 <div class="right1 ...
vue ajax提交防止伪造,axios+vue防止点击提交按钮而发送多次请求
问题:如图,当我连续点击提交按钮多次,后台会接收到多次数据. image.png 在网上找了下方法,结合自己实际的问题,解决如下(参考文章:https://www.jianshu.com/p/4445 ...
Vue打包点击手机按钮退出导致软件完全退出的解决方法
教程先使用npm下载npm install vue-awesome-mui 下载以后在min.js引入 import Mui from 'vue-awesome-mui' Vue.use(Mui) ...
js实现楼层跳跃（点击楼层按钮可对应到楼层，滚动到某一楼层对应的楼层按钮高亮）...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
前端Vue项目中点击a标签实现下载文件到本地的功能
点击a标签可实现下载图片或者是文件到本地的功能 1.根据后台提供的接口url下载文件到本地 <a :href="后台给接口提供的文件的url地址">点击下载文件< ...
html编辑点击取消复原,vue点击编辑按钮，内容变成input可以修改，也可以删除
一.效果图1 图2,点击报错之后,又变成图1的效果二.使用到了element UI中的以下组件: 三.使用的关键点是vue中的v-if指令四.关键代码如下 HTML部分添加街道编辑保存 @ ...
vue项目-点击添加或者修改按钮浏览器的屏幕变黑，再次点击屏幕之后浏览器恢复正常（火狐浏览器、ChromeCoreLauncher双核浏览器）
今天在写springboot+vue项目的时候发现了一个bug,之前写的项目就没有这种情况,bug如下: 点击添加或者修改按钮浏览器的屏幕变黑,再次点击屏幕之后浏览器恢复正常点击修改按钮屏幕变黑 ...
vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
vue中，点击button按钮后，页面上的input框再次自动获取焦点
需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率开始尝试了几种方法都没有成功一.首先想到的用vue指令 v-focus,然而没有成功 <In ...

vue实现点击上下按钮或上下箭头，列表上下滚动功能及特效

vue实现点击上下按钮或上下箭头，列表上下滚动功能及特效相关推荐

最新文章

热门文章