vue-seamless-scroll 无缝滚动事件用法、@click点击事件失效问题

2022-02-28 19:02:23 阅读：281 来源： 互联网

标签：vue 滚动 name seamless 事件单步默认值 click 无缝

使用方法：

1、安装

npm install vue-seamless-scroll --save

2、引入

<vue-seamless-scroll :data="listData" :class-option="classOption"></vue-seamless-scroll>

import vueSeamlessScroll from 'vue-seamless-scroll'

components: {
vueSeamlessScroll
},

3、配置参数

// 监听属性类似于data概念

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)
		}
	}
},

注意事项：

滚动重复加载问题：第一轮与第二轮数据同时显示，第二轮的数据@click点击事件无法生效。
解决方法：

给外层加点击事件，event.target获取点击dom元素
绑定属性，利用:**data-**name获取，
调用：与:data-name对应，获取自定义属性name时候用event.target.dataset.name

原理分析：
事件委托
 事件委托
 阮一峰老师的js运行机制
事件委托依靠的就是事件冒泡和事件捕获的机制

事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

所谓的事件委托就是通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。

完整代码：

<div class="chatbg" style="margin-top:3px" @click="clickProps($event)">
                            <ul class="item">
                                <li style="list-style-type:none;">
                                    <span class='time'>
                                        时间
                                    </span>
                                    <span class='content'>
                                        内容
                                    </span>
                                </li>
                            </ul>
                            <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
                                <ul class="item">
                                    <li v-for="(item, index) in listData" :key="'list-' + index"
                                         style="list-style-type:none;" :data-dept="item.id">
                                        <span class="time" :data-dept="item.id">{{item.date}}</span>
                                        <span class="content" :style="{'color':item.color}" :data-dept="item.id">{{ item.title }}</span>
                                    </li>
                                </ul>
                            </vue-seamless-scroll>
                        </div>



clickProps(e){
                var id = e.target.dataset.dept
                this.clickItem(id)
            },
            clickItem(id) {
                for(var i=0;i<this.listData.length;i++)
                {
                    if(this.listData[i].id===id)
                    {
                        if(this.listData[i].color==='yellow'){
                            this.$message.warning(this.listData[i].title)
                        }else if(this.listData[i].color==='red'){
                            this.$message.error(this.listData[i].title)
                        }
                    }
                }
            }

参考链接：
https://www.jianshu.com/p/a2a7d3a9cf2b
https://blog.csdn.net/weixin_43254676/article/details/94025887

标签：vue,滚动,name,seamless,事件,单步,默认值,click,无缝
来源： https://blog.csdn.net/qq_41797741/article/details/123181545