vue组件:列表自动无限循环
前述:用过vue-seamless-scroll插件,手动滚动列表到底部出现了空白现象,某些表现不符合项目场景,故自己写了一个自己用的组件,如果有人需要可以直接拿去用,如有不足请指教勿喷!
(图片来源网络,侵删)
主要功能:
- 列表自动无限循环滚动
- 鼠标移入停止滚动,移出继续滚动
- 待滚动内容高度未铺满并超过容器高度时不滚动
- 支持滚动速度、单次滚动时间间隔、单次滚动高度,三个参数控制
- 可自己手动滚动列表
效果图 :
组件代码:
export default { name: "my-auto-scroll", props: { list: { type: Array, default: () => [ { name: "张三1" }, { name: "张三2" }, { name: "张三3" }, { name: "张三4" }, { name: "张三5" }, { name: "张三6" }, { name: "张三7" }, { name: "张三8" }, { name: "张三9" }, { name: "张三10" }, ], }, speed: { type: Number, default: 0.1, }, //滚动作单步运动时的单纯运动距离 singleHeight: { type: Number, default: 0, }, //单步运动的时间间隔 waitTime: { type: Number, default: 0, }, }, data() { return { rafId: null, y: 0, showSecond: false, controleHeight: 0, }; }, watch: { list: { handler(newVal) { var that = this; this.$nextTick(() => { console.log(newVal); if (newVal && newVal.length > 0) { let scrollBox = that.$refs.scrollBox; let outer = that.$refs.outer; if (this.myReq) { cancelAnimationFrame(this.myReq); } // 开启动画 if (this.canRun()) this.reqAnimationFrame(); // this.reqAnimationFrame(); // 手动滚动到底部时滚动条重置到最上边,同时滚动盒子重置为top:0 outer.addEventListener("scroll", function () { if ( outer.scrollTop + outer.clientHeight + 4 >= outer.scrollHeight ) { outer.scrollTop = 0; that.y = 0; scrollBox.style.top = 0; } }); } }); }, deep: true, immediate: true, }, }, mounted() { window.addEventListener("resize", this.listenResizeFn); }, methods: { listenResizeFn() { cancelAnimationFrame(this.myReq); if (this.canRun()) this.reqAnimationFrame(); }, onMouseover() { clearTimeout(this.timer); cancelAnimationFrame(this.myReq); }, onMouseleave() { if (this.canRun()) this.reqAnimationFrame(); }, canRun() { let scrollItemBox = this.$refs.scrollItemBox; let scrollBox = this.$refs.scrollBox; let outer = this.$refs.outer; // 开启动画条件:滚动盒子(scrollBox)高度高于外层容器(outer)高度 if (outer.offsetHeight >= scrollItemBox.offsetHeight) { this.showSecond = false; outer.scrollTop = 0; this.y = 0; scrollBox.style.top = 0; return false; } else { this.showSecond = true; return true; } }, //获取dom元素的高度:content+padding+margin+border getComputedHeight(dom) { let computedStyle = getComputedStyle(dom); let computedHeight = dom.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom); return computedHeight; }, reqAnimationFrame() { //外层容器 let outer = this.$refs.outer; //滚动盒子 let scrollBox = this.$refs.scrollBox; //滚动盒子下边的第一个scroll-item-box, let scrollItemBox = this.$refs.scrollItemBox; //滚动速度 this.speed = this.speed > 1 ? 1 : this.speed = 20 && this.waitTime > 500) { if (this.controleHeight >= this.singleHeight) { cancelAnimationFrame(this.myReq); this.controleHeight = 0; this.timer = setTimeout(() => { if (this.canRun) this.reqAnimationFrame(); }, this.waitTime); return; } else { // 一次移动高度未达到指定距离继续执行动画 this.controleHeight += this.speed; } } //====添加滚动间隔控制====结束 //当滚动到第一个scroll-item-box高度时scrollBox重置为top:0,视觉上是无缝滚动 if (this.y >= definedHeight) { this.y = 0; } this.myReq = window.requestAnimationFrame(this.reqAnimationFrame); }, }, destroyed() { window.removeEventListener("resize", this.listenResizeFn); cancelAnimationFrame(this.myReq); if (this.timer) clearTimeout(this.timer); }, }; .scroll-outer { height: 100%; overflow-x: hidden; position: relative; &::-webkit-scrollbar { width: 0.3vw; } &:hover::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0.1vw rgba(0, 0, 0, 0.3); border-radius: 0.1vw; background-color: #295099; opacity: 1; // display: none; } &:hover::-webkit-scrollbar-thumb { opacity: 1; border-radius: 0.1vw; -webkit-box-shadow: inset 0 0 0.1vw rgba(0, 0, 0, 0.3); background-color: #0ba9ea; } } .scroll-inner-box { height: auto; position: absolute; width: 100%; top: 0; left: 0; }
使用示例:
import autoScroll from "@/components/autoScroll";
{{ item.jgjc }} {{ item.total||'--' }} {{ item.ypc||'--' }} {{ item.zlz||'--' }} {{ item.zlwc||'--' }}
使用注意:
- autoScroll容器默认是占外层容器宽高百分百,要自己在autoScroll外层加个容器
- 参数waitTIme和singleHeight同时存在,才能出现滚动动画间隔执行的效果
- 样式用了sass,如果有问题可以去掉或者导入sass
(图片来源网络,侵删)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...