使用vue-seamless-scroll 横向无限滚动 同时解决复制的dom事件无法触发的问题
<template>
<div
@click="clickProps($event)"
>
<vue-seamless-scroll
:data="List"
class="seamless-warp"
:class-option="optionSingleHeightTime"
>
<!-- 在需要添加点击事件的元素上绑定 :data-obj="JSON.stringify(item)" 否则事件无法触发且会抱错 -->
<div
class="item"
v-for="(item, index) in List"
:key="index"
style="background:#eee;width:300px;height:200px;"
:data-obj="JSON.stringify(item)"
>
<div style="width:100px;height:100px;background:orange" :data-obj="JSON.stringify(item)">{{ item.name }}</div>
</div>
</vue-seamless-scroll>
</div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
name: 'test',
components: {
vueSeamlessScroll,
},
computed: {
optionSingleHeightTime() {
return {
// singleHeight: 50,
// waitTime: 1500,
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 4, // 开始无缝滚动的数据量
hoverStop: true, // 是否开启鼠标悬停stop
direction: 3, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动)
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
}
},
},
data() {
return {
List: [
{name:1,value:1},
{name:1,value:1},
{name:1,value:1},
{name:1,value:1},
{name:1,value:1},
{name:1,value:1},
{name:1,value:1},
{name:1,value:1},
{name:1,value:1},
{name:1,value:1},
],
}
},
filters: {
},
mounted() {
},
methods: {
//无限滚动无法获取复制dom的事件 用此方法
clickProps(e) {
let item = JSON.parse(e.target.dataset.obj)
console.log(item,"点击事件");
this.showDetail(item)
},
showDetail(item) {
console.log("点击事件");
},
},
}
</script>
<style scoped lang="less">
.seamless-warp {
height: 100%;
overflow: hidden;
width: 100%;
white-space: nowrap;
}
.item {
background: #eee;
margin: 10px;
width: 500px;
height: 200px;
display: inline-block;
}
</style>
