vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表
本文實(shí)例為大家分享了vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表的具體代碼,供大家參考,具體內(nèi)容如下
1.安裝
vue-seamless-scroll 實(shí)例文檔鏈接
cnpm install vue-seamless-scroll --save
2.文件中引入,組件配置
import vueSeamlessScroll from 'vue-seamless-scroll'
3.使用
<template> <vue-seamless-scroll :data="CardPartsStatisticsList" class="seamless-warp" :class-option="classOption"> <ul> <li class="DataList_top" v-for="(item,index) in CardPartsStatisticsList" :key="index" v-if="index < 5"> <div class="DataList_left">{{index+1}}</div> <div class="DataList_left">{{item.itemname}}</div> <div class="DataList_left">{{item.number}}</div> </li> </ul> </vue-seamless-scroll> </template> <script> import vueSeamlessScroll from 'vue-seamless-scroll' export default { data() {}, components: { //組件 vueSeamlessScroll }, computed: { classOption () { return { step: 0.2, // 數(shù)值越大速度滾動(dòng)越快 limitMoveNum: 2, // 開(kāi)始無(wú)縫滾動(dòng)的數(shù)據(jù)量 this.dataList.length hoverStop: true, // 是否開(kāi)啟鼠標(biāo)懸停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 開(kāi)啟數(shù)據(jù)實(shí)時(shí)監(jiān)控刷新dom singleHeight: 0, // 單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無(wú)縫不停止的滾動(dòng)) direction => 0/1 singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無(wú)縫不停止的滾動(dòng)) direction => 2/3 waitTime: 1000 // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms) } } }, } </script> <style> .seamless-warp{ width: 100%; height: calc(100% - 16px); overflow: hidden; } </style>
關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于vue中解決v-for使用報(bào)紅并出現(xiàn)警告的問(wèn)題
下面小編就為大家分享一篇基于vue中解決v-for使用報(bào)紅并出現(xiàn)警告的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Vue與Node.js通過(guò)socket.io通信的示例代碼
這篇文章主要介紹了Vue與Node.js通過(guò)socket.io通信的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07解決webpack-bundle-analyzer的問(wèn)題大坑
這篇文章主要介紹了解決webpack-bundle-analyzer的問(wèn)題大坑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06vue實(shí)現(xiàn)拖拽滑動(dòng)分割面板
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽滑動(dòng)分割面板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03element?ui中el-form-item的屬性rules的用法示例小結(jié)
這篇文章主要介紹了element?ui中el-form-item的屬性rules的用法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07vue通過(guò)接口直接下載java生成好的Excel表格案例
這篇文章主要介紹了vue通過(guò)接口直接下載java生成好的Excel表格案例2020-10-10Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果
本文主要介紹了Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01