vue實現(xiàn)無縫滾動的示例詳解
vue非組件實現(xiàn)列表的無縫滾動問題(小編能力有限,如有更好方法還請大佬指點一二)
*原理:首先循環(huán)兩遍數(shù)組,當(dāng)容器滾去第一個數(shù)組高度的時候,第二個數(shù)組剛好填滿容器,這時候?qū)L去高度設(shè)置為0則可以實現(xiàn)無縫滾動。
*簡易原理圖如下
話不多說直接上代碼:
1.采用js的方法實現(xiàn)
<template> <div> <div class="box"> <div v-for="item in 2" class="item-box" :style="{transform:'translate(0,'+scrollTop+'px)'}"> <div class="item" v-for="i in 9">{{i}}</div> </div> </div> </div> </template> <script> export default { data() { return { scrollTop: 0, } }, onLoad() { this.roll() }, methods: { roll() { if (this.scrollTop == -300) { this.scrollTop = 0 } this.scrollTop -= 1; setTimeout(() => { this.roll() }, 10) }, } } </script> <style> .box { width: 320px; height: 300px; background-color: pink; overflow: hidden; } .box .item-box { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .box .item-box .item { width: 29%; height: 29%; margin: 1%; background-color: paleturquoise; display: flex; align-items: center; justify-content: center; font-weight: 700; } </style>
2.css動畫實現(xiàn)
<template> <div> <div class="box"> <div v-for="item in 2" class="item-box"> <div class="item" v-for="i in 9">{{i}}</div> </div> </div> </div> </template> <script> export default { data() { return {} }, methods: { } } </script> <style> .box { width: 320px; height: 300px; background-color: pink; overflow: hidden; } .box .item-box { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; animation: roll 5s linear infinite; } .box .item-box .item { width: 29%; height: 29%; margin: 1%; background-color: paleturquoise; display: flex; align-items: center; justify-content: center; font-weight: 700; } @keyframes roll { 0% { transform: translate(0, 0px); } 20% { transform: translate(0, -60px); } 40% { transform: translate(0, -120px); } 60% { transform: translate(0, -180px); } 80% { transform: translate(0, -240px); } 100% { transform: translate(0, -300px); } } </style>
到此這篇關(guān)于vue實現(xiàn)無縫滾動的示例詳解的文章就介紹到這了,更多相關(guān)vue無縫滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法
下面小編就為大家?guī)硪黄獀ue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09使用electron-builder將項目打包成桌面程序的詳細教程
這篇文章主要介紹了使用electron-builder把web端的項目打包生成桌面程序,并可安裝程序,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-08-08vue如何轉(zhuǎn)換時間格式為年月日時分秒和年月日(補零)
這篇文章主要介紹了vue如何轉(zhuǎn)換時間格式為年月日時分秒和年月日(補零),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04