vue實現(xiàn)列表無縫滾動效果

更新時間：2022年04月08日 10:49:36 作者：張宸陽

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

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

1.安裝

npm install vue-seamless-scroll --save

2.在需要使用的組件中引入進行配置

import vueSeamlessScroll from "vue-seamless-scroll";

在components中注入

components: { vueSeamlessScroll },

3.使用

<template>
? <div class="seamlessRolling" @click="lookClick($event)">
? ? <vue-seamless-scroll :data="msgData" :class-option="classOption">
? ? ? <ul>
? ? ? ? <li v-for="(item, index) in msgData" :key="index">
? ? ? ? ? <span>{{ item.id }}</span>
? ? ? ? ? <span>{{ item.title }}</span>
? ? ? ? ? <span class="handle" :id="item.id" :data-tit="item.title">查看</span>
? ? ? ? </li>
? ? ? </ul>
? ? </vue-seamless-scroll>
? </div>
</template>

<script>
// 這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）
// 例如：import 《組件名稱》 from '《組件路徑》'

import vueSeamlessScroll from "vue-seamless-scroll";
export default {
? // import引入的組件需要注入到對象中才能使用
? components: { vueSeamlessScroll },
? data() {
? ? // 這里存放數(shù)據(jù)
? ? return {
? ? ? msgData: [
? ? ? ? {
? ? ? ? ? id: 1,
? ? ? ? ? name: 1,
? ? ? ? ? title: "無縫滾動001",
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: 2,
? ? ? ? ? name: 2,
? ? ? ? ? title: "無縫滾動002",
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: 3,
? ? ? ? ? name: 3,
? ? ? ? ? title: "無縫滾動003",
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: 4,
? ? ? ? ? name: 4,
? ? ? ? ? title: "無縫滾動004",
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: 5,
? ? ? ? ? name: 5,
? ? ? ? ? title: "無縫滾動005",
? ? ? ? },
? ? ? ],
? ? };
? },
? // 計算屬性 類似于data概念
? computed: {
? ? classOption() {
? ? ? return {
? ? ? ? step: 1, // 數(shù)值越大速度滾動越快
? ? ? ? limitMoveNum: 2, // 開始無縫滾動的數(shù)據(jù)量 this.dataList.length
? ? ? ? hoverStop: true, // 是否開啟鼠標懸停stop
? ? ? ? direction: 1, // 0向下 1向上 2向左 3向右
? ? ? ? openWatch: true, // 開啟數(shù)據(jù)實時監(jiān)控刷新dom
? ? ? ? singleHeight: 0, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1
? ? ? ? singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3
? ? ? ? waitTime: 1000, // 單步運動停止的時間(默認值1000ms)
? ? ? };
? ? },
? },
? // 監(jiān)控data中的數(shù)據(jù)變化
? watch: {},
? // 方法集合
? methods: {
? ? lookClick(e) {
? ? ? if (e.target.className == "handle") {
? ? ? ? console.log(e.target.id);
? ? ? ? console.log(e.target.dataset.tit);
? ? ? }
? ? },
? },
? // 生命周期 - 創(chuàng)建完成（可以訪問當前this實例）
? created() {},
? // 生命周期 - 掛載完成（可以訪問DOM元素）
? mounted() {},
? beforeCreate() {}, // 生命周期 - 創(chuàng)建之前
? beforeMount() {}, // 生命周期 - 掛載之前
? beforeUpdate() {}, // 生命周期 - 更新之前
? updated() {}, // 生命周期 - 更新之后
? beforeDestroy() {}, // 生命周期 - 銷毀之前
? destroyed() {}, // 生命周期 - 銷毀完成
? activated() {}, // 如果頁面有keep-alive緩存功能，這個函數(shù)會觸發(fā)
};
</script>

<style lang='scss' >
//@import url(); 引入公共css類
</style>
<style lang='scss' scoped>
//@import url(); 引入公共css類
* {
? padding: 0;
? margin: 0;
}
.seamlessRolling {
? margin: 0 auto;
? width: 300px;
? height: 200px;
? border: 1px solid rgb(165, 76, 76);
? overflow: hidden;
? ul,
? li {
? ? list-style: none;
? }
? li {
? ? height: 60px;
? ? line-height: 60px;
? ? display: flex;
? ? justify-content: space-around;
? ? .handle {
? ? ? cursor: pointer;
? ? }
? }
}
</style>

4.配置項說明

data中的msgData為所需要實現(xiàn)滾動的列表數(shù)據(jù),計算屬性computeds中classOption為滾動屬性的配置

5.可能會遇到的問題

vue-seamless-scroll是通過將要實現(xiàn)滾動的數(shù)據(jù)復制一遍來實現(xiàn)無縫滾動,當需要給每一條數(shù)據(jù)綁定事件時,如果直接綁定,復制出的數(shù)據(jù)無法綁定事件?？梢酝ㄟ^事件委托的方式，給列表元素的父元素綁定事件，通過事件對象event,獲取到點擊元素的類名進行判斷其是否為需要的元素,將綁定事件所需的id綁定為按鈕id,可以通過event.target.id獲取?；蛘邔⑺獋鬟f的變量綁定為該按鈕的自定義屬性，如data-tit，通過event.target.dataset.tit獲取。

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

您可能感興趣的文章: