vue實(shí)現(xiàn)循環(huán)滾動列表
更新時(shí)間：2020年06月30日 09:38:09 作者：qq_42221334
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)滾動列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)循環(huán)滾動列表的具體代碼，供大家參考，具體內(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ù)值越大速度滾動越快
limitMoveNum: 2, // 開始無縫滾動的數(shù)據(jù)量 this.dataList.length
hoverStop: true, // 是否開啟鼠標(biāo)懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 開啟數(shù)據(jù)實(shí)時(shí)監(jiān)控刷新dom
singleHeight: 0, // 單步運(yùn)動停止的高度(默認(rèn)值0是無縫不停止的滾動) direction => 0/1
singleWidth: 0, // 單步運(yùn)動停止的寬度(默認(rèn)值0是無縫不停止的滾動) direction => 2/3
waitTime: 1000 // 單步運(yùn)動停止的時(shí)間(默認(rèn)值1000ms)
}
}
},
}
</script>
<style>
.seamless-warp{
width: 100%;
height: calc(100% - 16px);
overflow: hidden;
}
</style>
關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式
這篇文章主要介紹了vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue中利用three.js實(shí)現(xiàn)全景圖的完整示例
這篇文章主要給大家介紹了關(guān)于vue中利用three.js實(shí)現(xiàn)全景圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue項(xiàng)目打包后網(wǎng)頁的title亂碼解決方案
這篇文章主要介紹了vue項(xiàng)目打包后網(wǎng)頁的title亂碼解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了Vue.js搭建移動端購物車界面，重點(diǎn)介紹基本結(jié)構(gòu)和數(shù)據(jù)渲染，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue3中的props組件抽離，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Monorepo風(fēng)格的組件工程搭建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
vue+axios新手實(shí)踐實(shí)現(xiàn)登陸的示例代碼
這篇文章主要介紹了vue+axios新手實(shí)踐實(shí)現(xiàn)登陸的示例代碼，實(shí)現(xiàn)了登陸攔截，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
docxtemplater?是一種郵件合并工具,以編程方式使用并處理?xiàng)l件、循環(huán),并且可以擴(kuò)展以插入任何內(nèi)容,下面我們來看看如何使用docxtemplater導(dǎo)出word吧2025-04-04
vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式
這篇文章主要介紹了vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要給大家介紹了關(guān)于Vue3中watchEffect用途的相關(guān)資料, watch和watchEffect都是監(jiān)聽器,但在寫法和使用上有所區(qū)別,本文進(jìn)行了詳細(xì)的介紹,需要的朋友可以參考下2021-07-07