vue-seamless-scroll無縫滾動(dòng)組件使用方法詳解
本文實(shí)例為大家分享了vue無縫滾動(dòng)組件vue-seamless-scroll的具體實(shí)現(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ù)值越大速度滾動(dòng)越快 ? ? ? ? limitMoveNum: 2, // 開始無縫滾動(dòng)的數(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)動(dòng)停止的高度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 0/1 ? ? ? ? singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3 ? ? ? ? waitTime: 1000, // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms) ? ? ? }; ? ? }, ? }, }; </script>
效果圖2:
computed: { ? seamlessScrollOption() { ? ? ? return { ? ? ? ? step: 0.5, // 數(shù)值越大速度滾動(dòng)越快 ? ? ? ? hoverStop: true, // 是否開啟鼠標(biāo)懸停stop ? ? ? ? direction: 0, // 0向下 1向上 2向左 3向右 ? ? ? ? openWatch: true, // 開啟數(shù)據(jù)實(shí)時(shí)監(jiān)控刷新dom ? ? ? ? singleHeight: 40, // 單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 0/1 ? ? ? ? singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3 ? ? ? ? waitTime: 2000, // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms) ? ? ? }; ? ? }, ? },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue自定義組件(通過Vue.use()來使用)即install的用法說明
這篇文章主要介紹了vue自定義組件(通過Vue.use()來使用)即install的用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue設(shè)計(jì)與實(shí)現(xiàn)合理的觸發(fā)響應(yīng)
這篇文章主要為大家介紹了vue設(shè)計(jì)與實(shí)現(xiàn)合理的觸發(fā)響應(yīng)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08使用element-ui的Pagination分頁的注意事項(xiàng)及說明
這篇文章主要介紹了使用element-ui的Pagination分頁的注意事項(xiàng)及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02vue和webpack項(xiàng)目構(gòu)建過程常用的npm命令詳解
本文通過實(shí)例代碼給大家介紹了vue和webpack項(xiàng)目構(gòu)建過程常用的npm命令,需要的朋友可以參考下2018-06-06