vue-seamless-scroll無縫滾動組件使用方法詳解
更新時間:2022年04月08日 12:59:33 作者:~疆
這篇文章主要為大家詳細介紹了vue-seamless-scroll無縫滾動組件的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue無縫滾動組件vue-seamless-scroll的具體實現(xiàn)代碼,供大家參考,具體內容如下
下載
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ù)據量 this.dataList.length ? ? ? ? hoverStop: true, // 是否開啟鼠標懸停stop ? ? ? ? direction: 1, // 0向下 1向上 2向左 3向右 ? ? ? ? openWatch: true, // 開啟數(shù)據實時監(jiān)控刷新dom ? ? ? ? singleHeight: 0, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1 ? ? ? ? singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3 ? ? ? ? waitTime: 1000, // 單步運動停止的時間(默認值1000ms) ? ? ? }; ? ? }, ? }, }; </script>
效果圖2:
computed: { ? seamlessScrollOption() { ? ? ? return { ? ? ? ? step: 0.5, // 數(shù)值越大速度滾動越快 ? ? ? ? hoverStop: true, // 是否開啟鼠標懸停stop ? ? ? ? direction: 0, // 0向下 1向上 2向左 3向右 ? ? ? ? openWatch: true, // 開啟數(shù)據實時監(jiān)控刷新dom ? ? ? ? singleHeight: 40, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1 ? ? ? ? singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3 ? ? ? ? waitTime: 2000, // 單步運動停止的時間(默認值1000ms) ? ? ? }; ? ? }, ? },
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue自定義組件(通過Vue.use()來使用)即install的用法說明
這篇文章主要介紹了vue自定義組件(通過Vue.use()來使用)即install的用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08使用element-ui的Pagination分頁的注意事項及說明
這篇文章主要介紹了使用element-ui的Pagination分頁的注意事項及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02