滑动自定义指令
2021/6/29 23:20:46
本文主要是介绍滑动自定义指令,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
效果图:
代码(template):
<template> <div class="scrollAnimation"> <ul v-scroll-height height="3" speed1='1000' speed2='500' isEnd="true" > <li class="list_item" :class="{ bg: index == current }" v-for="(item, index) in items" :key="item.id" > {{ item.name }} </li> </ul> </div> </template> <script> export default { directives: {}, data() { return { items: [], current: 0, timer: null, show: true, parentHeight: "", childHeight: "", totalPage: "", // rotationTime: { // // 轮播的时间 // time: 10000, // 轮播间隔时间 // leaveAndGoTime: 3000, // 鼠标进入后离开,轮播的间隔时间 // animateTime: 1000, // 动画时间 // }, }; }, mounted() { this.getList(); }, methods: { }, watch: { }, }; </script> <style lang="less" scoped> .scrollAnimation { width: 200px; background-color: red; overflow-y: auto; position: relative; ul { position: relative; left: 0; top: 0; height: 100px; overflow-y: auto; li { font-size: 18px; // color: #cccc; background-color: #cccc; margin-bottom: 5px; line-height: 20px; height: 20px; } .bg { color: red; } } } </style>
指令代码
import Vue from "vue"; Vue.directive('scroll-height', { // el:指令所绑定的元素,可以用来直接操作 DOM。 //binding:一个对象,包含以下 property: bind(el, binding, vnode) { let time = null; let scrollTime = null; let speed = 1000; let current = 0; let self = vnode.context; let $el = $(el); let myHeigth = $el.attr("height") ? $el.attr("height") : ''; let tag = $el.attr("Tag") ? $el.attr("Tag") : 'li'; let isEnd = $el.attr("isEnd")==true ? true : false; let speed1 = $el.attr("speed1") ? $el.attr("speed1") : 1000; let speed2= $el.attr("speed2") ? String($el.attr("speed2")) : 500; self.$nextTick(() => { // 1.首先,几行可以滑动 let maxHeight = 0; let chrLength = $el.find(tag).length; for (let i = 0; i < myHeigth; i++) { maxHeight += $el.find(tag).eq(i).outerHeight(true) } $el.css({ height: maxHeight }); $el.css({ overflowY: 'auto' }); // 定时滚动 function autoPlay() { clearInterval(time) time = setInterval(animation, speed1) } // 移动 function animation() { let end = isEnd ? myHeigth : 0 if (current < self.items.length-1 ) { current++ } else { current = 0 } self.current = current let offsetTop = $el.find(tag).eq(current).outerHeight(true) $el.stop(false, true).animate({ scrollTop: `${current *offsetTop}px`, }, speed2) } //鼠标进入 function bindMouseEnter() { clearInterval(time) clearInterval(scrollTime) } // 鼠标离开 function bindMouseLeave() { scrollTime = setTimeout(() => { autoPlay(); animation(); }, 1000); } autoPlay(); el.addEventListener( "mouseenter", bindMouseEnter ); el.addEventListener( "mouseleave", bindMouseLeave ); }) }, inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用 el.focus(); }, update(el, binding) { } })
在全局全局即可(main.js)
这篇关于滑动自定义指令的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南