vue-seamless-scroll無縫滾動組件使用方法詳解

更新時間：2022年04月08日 12:59:33 作者：~疆

這篇文章主要為大家詳細(xì)介紹了vue-seamless-scroll無縫滾動組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue無縫滾動組件vue-seamless-scroll的具體實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

下載

cnpm i -S vue-seamless-scroll

main.js中引入：

import VueSeamlessScroll from 'vue-seamless-scroll'
Vue.use(VueSeamlessScroll)

使用：

<template>
? <div>
? ? ? <vue-seamless-scroll
? ? ? ? :data="listData"
? ? ? ? :class-option="seamlessScrollOption"
? ? ? ? style="
? ? ? ? ? border: 1px solid white;
? ? ? ? ? height: 200px;
? ? ? ? ? overflow: hidden;
? ? ? ? ? width: 200px;
? ? ? ? ? color: white;
? ? ? ? ? font-size: 18px;
? ? ? ? ? text-align: center;
? ? ? ? "
? ? ? >
? ? ? ? <ul>
? ? ? ? ? <li
? ? ? ? ? ? v-for="(item, index) in listData"
? ? ? ? ? ? :key="index"
? ? ? ? ? ? style="padding: 10px; margin: 5px"
? ? ? ? ? >
? ? ? ? ? ? <span class="title">{{ item.title }}：</span
? ? ? ? ? ? ><span class="date">{{ item.time }}</span>
? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? </vue-seamless-scroll>
? </div>
</template>
?
<script>
?
export default {
? props: {},
? data() {
? ? return {
? ? ? listData: [
? ? ? ? {
? ? ? ? ? title: "張三",
? ? ? ? ? time: "2021-08-09",
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: "李四",
? ? ? ? ? time: "2021-08-09",
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: "王五",
? ? ? ? ? time: "2021-08-09",
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: "趙六",
? ? ? ? ? time: "2021-08-09",
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: "前七",
? ? ? ? ? time: "2021-08-09",
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: "孫八",
? ? ? ? ? time: "2021-08-09",
? ? ? ? },
? ? ? ],
? ? };
? },
? computed: {
? ? seamlessScrollOption() {
? ? ? 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ù)實時監(jiān)控刷新dom
? ? ? ? singleHeight: 0, // 單步運動停止的高度(默認(rèn)值0是無縫不停止的滾動) direction => 0/1
? ? ? ? singleWidth: 0, // 單步運動停止的寬度(默認(rèn)值0是無縫不停止的滾動) direction => 2/3
? ? ? ? waitTime: 1000, // 單步運動停止的時間(默認(rèn)值1000ms)
? ? ? };
? ? },
? },
};
</script>

效果圖2：

computed: {
? seamlessScrollOption() {
? ? ? return {
? ? ? ? step: 0.5, // 數(shù)值越大速度滾動越快
? ? ? ? hoverStop: true, // 是否開啟鼠標(biāo)懸停stop
? ? ? ? direction: 0, // 0向下 1向上 2向左 3向右
? ? ? ? openWatch: true, // 開啟數(shù)據(jù)實時監(jiān)控刷新dom
? ? ? ? singleHeight: 40, // 單步運動停止的高度(默認(rèn)值0是無縫不停止的滾動) direction => 0/1
? ? ? ? singleWidth: 0, // 單步運動停止的寬度(默認(rèn)值0是無縫不停止的滾動) direction => 2/3
? ? ? ? waitTime: 2000, // 單步運動停止的時間(默認(rèn)值1000ms)
? ? ? };
? ? },
? },

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: