Jacinda

Appearance

On this page
🎨 作者：Jacinda 📔 阅读量：

vue-seamless-scroll 数据的循环滚动 ​

之前在归档里，有写过此组件的具体安装引入和用法。这次因为这个组件，又遇到了些许问题，对此专门写一章，来归纳整理一下。

安装 ​

javascript
npm install vue-seamless-scroll --save

用法 ​

html
<template>
    <vue-seamless-scroll
        class="scroll_list" 
        :data="listData" 
        :class-option="defaultOption"
    >
        <div style="height: 100%;">...滚动区域</div>
    </vue-seamless-scroll>
</template>
 
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'  // vue2引入方式
import scroll from "vue-seamless-scroll/src"  // vue3引入方式
 
export default {
    // 监听属性 类似于data概念
    data() {
        //这⾥存放数据
        return {
            listData: [...], // 这里的数据，假如没有用在滚动里，可以是任意内容。
        };
    },
    components: {
        vueSeamlessScroll
    },
    computed: {
        defaultOption () {
            // 参数配置
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
}
</script>

<style lang="scss" scoped>
    /* 需要给组件设置高度，然后加上超出隐藏属性 */
    .scroll_list {
        height: 120px;
        overflow: hidden;
    }
</style>

滚动内容实时更新 ​

问题 ​

在写这个之前，由于之前的写法是直接放入了 store 里的数据，点击事件触发时，运用状态储存管理更新 store。但是遇到一个问题，滚动的内容无法实时更新，又或者是没有把原来的数据覆盖，而是直接接入滚动。

解决方法 ​

这里，我通过监听 store 里的值，如果变化，则把新的值赋值给 data 里的数据，然后调用 vue-seamless-scroll 组件内部的 reset() 方法

javascript
export default {
    data() {
        return {
            detailInfo: this.$store.state.xxx // 把状态管理的初始值先赋值，让页面加载时，滚动初始数据
        }
    },
    computed: {
        // 利用计算属性，方便后面监听
		introductData() {
			return this.$store.state.xxx
		},
    },
    watch: {
        // 监听 store 里的数据变化
		introductData (newVal, oldVal) {
			if(newVal) {
				this.detailInfo = newVal;
                // 调用 vue-seamless-scroll 组件内部的方法，来更新原有数据
				this.$nextTick(() => {
					this.$refs.vueSeamlessScroll.reset()
				})
			}
		}
	},
}

循环滚动时，点击事件无效 ​

写大屏的时候，因为侧边会有滚动数据，需要对每一条滚动数据给予点击事件。点击时，地图上对应坐标点会弹出对应窗口，显示所点击数据的详细信息。在写点击事件时，就遇到这样的问题：

问题 ​

当我点击数据的时候，会出现点击事件无效的情况。只有等下一次循环时，新循环出来的数据才能点击。这样就会造成用户会有一部分数据，出现点击不了的情况，用户体验感差。

解决方法 ​

我们把点击事件移到组件的外层，通过 for循环中 每一个 ClassName 类名来获取Dom元素的数据

关键：

  • class="scrollItem"
  • :data="JSON.stringify(item)"
html
<div @click="handleClick($event)">
    <vue-seamless-scroll
        :data="orderList"
        :class-option="classOption"
        :style="{'height': `${height}px !important`}"
        class="warp"
    >
        <div
            v-for="(item,index) in orderList"
            :key="index"
            class="scrollItem"
            :data="JSON.stringify(item)"
        >
            <div>{{ item.name }}</div>
        </div>
    </vue-seamless-scroll>
</div>
javascript
handleClick(e) {
    /** --- start ---*/ 

    const path = e.path || (e.composedPath && e.composedPath());

    // 自定义类名 scrollItem，把这个替换掉即可
    let target = path.filter((r) => /scrollItem/.test(r.className));

    if (target.length) target = target[0];
    else return;

    // 获取到的单项数据详情
    const data = JSON.parse(target.getAttribute("data")); 

    /** --- end --- */

    console.log(data)
},

📖 参考文档 ​

Copyright © 2023-present Jacinda