vue-seamless-scroll 点击click失效
翟嘉年
安装vue-seamless-scroll
npm install vue-seamless-scroll --save
引入
1.main.js中全局引入
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
2.局部引入
<script>
import vueSeamless from 'vue-seamless-scroll'
export default {
components: {
vueSeamless
}
}
</script>
在template中使用 vue-seamless-scroll 标签
在代码中直接加上点击事件触发弹出框的话，在第二轮循环的时候弹不出来
<template>
<div
class="maintable"
v-if="datalist && datalist.length > 0"
>
<vue-seamless-scroll :data="datalist" :class-option="listOption">
<div class="onebox" v-for="(item, index) in datalist" :key="index">
<div class="name" :title="item.xm">{{ item.xm }}</div>
<div class="phone">{{ item.enSjh }}</div>
<div class="cardnumber">
{{ item.enSfzh }}
<!-- {{ item.cardnumber | jmsjh }} -->
</div>
<div class="record" @click="recordInfo(item)">
追踪记录查看
</div>
</div>
</vue-seamless-scroll>
</div>
</template>
此时在轮播的父元素绑定一个点击事件@click=“clickup($event)”
在添加了点击事件之后，点击那个列那里的任一地方都会触发click事件，那么要实现只点击对应地方才弹框的需求，可以加个判断条件
<template>
<div
class="maintable"
@click="clickup($event)"
v-if="datalist && datalist.length > 0"
>
<vue-seamless-scroll :data="datalist" :class-option="listOption">
<div class="onebox" v-for="(item, index) in datalist" :key="index">
<div class="name" :title="item.xm">{{ item.xm }}</div>
<div class="phone">{{ item.enSjh }}</div>
<div class="cardnumber">
{{ item.enSfzh }}
<!-- {{ item.cardnumber | jmsjh }} -->
</div>
<div class="record" :data-obj="JSON.stringify(item)">
<!-- :data-obj="JSON.stringify(item)" 传递参数 -->
追踪记录查看
</div>
</div>
</vue-seamless-scroll>
</div>
</template>
clickup(e) {
// 使仅点击按钮触发点击事件
if (e.target.classList.contains("record")) { // record要点击的class名
let row = JSON.parse(e.target.dataset.obj); // 传递参数
this.$parent.$parent.recordLIst(row);
}
},
完整代码
<template>
<div class="item-main">
<!-- 表格头部 -->
<div class="header">
<div class="name">姓名</div>
<div class="name">电话</div>
<div class="name">身份证</div>
<div class="name">追踪记录</div>
</div>
<!-- 表格内容 -->
<div
class="maintable"
@click="clickup($event)"
v-if="datalist && datalist.length > 0"
>
<vue-seamless-scroll :data="datalist" :class-option="listOption">
<div class="onebox" v-for="(item, index) in datalist" :key="index">
<div class="name" :title="item.name">{{ item.name }}</div>
<div class="phone">{{ item.phone | jmSfzh }}</div>
<div class="cardnumber">{{ item.cardnumber | jmsjh }}</div>
<div class="record" :data-obj="JSON.stringify(item)">
<!-- :data-obj="JSON.stringify(item)" 传递参数 -->
追踪记录查看
</div>
</div>
</vue-seamless-scroll>
</div>
<div class="empty" v-else-if="datalist.length == 0 && isInit">暂无数据</div>
<!-- <trackRecord ref="trackRecord" /> -->
</div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
components: {
vueSeamlessScroll,
},
data() {
return {
isInit: false,
datalist: [
{
name: "李四",
phone: "13312345678",
cardnumber: "620123425266776343",
record: "追踪记录查看",
},
{
name: "张三",
phone: "13312345678",
cardnumber: "620123425266776343",
record: "追踪记录查看",
},
],
};
},
filters: {
jmSfzh(name) {
if (name != null) {
return name.substr(0, 3) + "****" + name.substr(7);
}
},
jmsjh(name) {
if (name != null) {
return name.substr(0, 10) + "****" + name.substr(14);
}
},
},
methods: {
clickup(e) {
// 使仅点击按钮触发点击事件
if (e.target.classList.contains("record")) {
let row = JSON.parse(e.target.dataset.obj);
this.$parent.$parent.recordLIst(row);
}
},
},
mounted() {
this.getList();
},
computed: {
listOption() {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 4, // 开始无缝滚动的数据量 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>
.empty {
font-size: 0.4rem;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: #ffc26c;
// height: 100%;
text-align: center;
padding-top: 2rem;
}
.item-main {
width: 100%;
height: 100%;
position: relative;
padding-top: 0.63rem;
.header {
width: 100%;
height: 0.71rem;
display: flex;
justify-content: space-evenly;
padding-left: 0.75rem;
padding-right: 0.83rem;
.name {
text-align: center;
width: 3.6rem;
font-size: 0.4rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffa525;
line-height: 0.29rem;
}
}
.maintable {
overflow: hidden;
width: 100%;
height: 5.27rem;
padding-left: 0.75rem;
padding-right: 0.83rem;
padding-bottom: 0.7rem;
.onebox {
width: 100%;
height: 0.85rem;
// background: url("~@/assets/bigdata/photo2.png") center center no-repeat;
// background-size: 100% 100%;
background-color: rgba($color: #ffa525, $alpha: 0.3);
margin-bottom: 0.2rem;
display: flex;
align-items: center;
justify-content: space-evenly;
cursor: pointer;
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
width: 3.6rem;
font-size: 0.4rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffc26c;
}
.phone {
text-align: center;
width: 3.6rem;
font-size: 0.4rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffc26c;
}
.cardnumber {
text-align: center;
width: 3.6rem;
font-size: 0.4rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffc26c;
}
.record {
text-align: center;
width: 3.6rem;
font-size: 0.4rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffc26c;
}
}
}
}
</style>
类似资料：