快捷導(dǎo)航

基于vue-seamless-scroll實現(xiàn)無縫滾動效果

更新時間：2022年04月08日 13:19:01 作者：weixin_40601606

這篇文章主要為大家詳細(xì)介紹了基于vue-seamless-scroll實現(xiàn)無縫滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue中，基于vue-seamless-scroll無縫滾動，供大家參考，具體內(nèi)容如下

1、安裝vue-seamless-scroll

npm install vue-seamless-scroll --save

2、引入組件

全局引入在main.js中添加

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

組件局部引入

<vue-seamless-scroll></vue-seamless-scroll>
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
? ? ? ? vueSeamlessScroll
},

3、配置參數(shù)

// 監(jiān)聽屬性 類似于data概念
computed: {
? ? ? ? defaultOption () {
? ? ? ? ? ? ? ? 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)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? },

4、完整實例代碼

<template>
? ? <div class="" style="padding: 50px;">
? ? ? ? <div class="page-example3" style="">
? ? ? ? ? ? <vue-seamless-scroll :data="listData" :class-option="defaultOption" >
? ? ? ? ? ? ? ? <ul class="ul-scoll">
? ? ? ? ? ? ? ? ? ? <li v-for="(item, index) in listData" :key='index'>
? ? ? ? ? ? ? ? ? ? ? ? <span class="title">{{item.title}}：</span><span class="date">{{item.time}}</span>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </vue-seamless-scroll>
? ? ? ? </div>
? ? </div>
</template>
?
<script>
? ? import vueSeamlessScroll from 'vue-seamless-scroll'
? ? export default {
? ? ? ? name: 'Example3',
? ? ? ? data() {
? ? ? ? ? ? // 這里存放數(shù)據(jù)
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? listData: []
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? // import引入的組件需要注入到對象中才能使用
? ? ? ? components: {
? ? ? ? ? ? vueSeamlessScroll
? ? ? ? },
? ? ? ? // 監(jiān)聽屬性 類似于data概念
? ? ? ? computed: {
? ? ? ? ? ? defaultOption () {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? step: 1, // 數(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)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? },
? ? ? ? // 方法集合
? ? ? ? methods: {},
? ? ? ? // 監(jiān)控data中的數(shù)據(jù)變化
? ? ? ? watch: {},
? ? ? ? // 生命周期 - 創(chuàng)建完成（可以訪問當(dāng)前this實例）
? ? ? ? created() {
?
? ? ? ? },
? ? ? ? // 生命周期 - 掛載完成（可以訪問DOM元素）
? ? ? ? mounted() {
? ? ? ? ? ? for(let i = 0 ; i < 15 ; i++){
? ? ? ? ? ? ? ? let j = {
? ? ? ? ? ? ? ? ? ? title:'無縫滾動第幾條啊啊啊-'+i,
? ? ? ? ? ? ? ? ? ? time: '2020-04-10'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.listData.push(j)
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>
?
<style scoped lang="scss">
? ? //@import url(); 引入公共css類
? ? .page-example3{
? ? ? ? width: 400px;
? ? ? ? height: 200px;
? ? ? ? overflow: hidden;
? ? ? ? border: 1px solid #283dff;
? ? ? ? .ul-scoll{
? ? ? ? ? ? li{
? ? ? ? ? ? ? ? margin: 6px;
? ? ? ? ? ? ? ? padding: 5px;
? ? ? ? ? ? ? ? background: rgba(198, 142, 226, 0.4);
? ? ? ? ? ? }
? ? ? ? }
? ? }
</style>

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

您可能感興趣的文章: