vue-seamless-scroll遇到一些问题

vue-seamless-scroll点击事件不触发解决办法

使用事件委托来解决，代码如下：

<template>

<div class="container">

<div class="title">

<div class="title-left">越限预警</div>

</div>

<div class="box seamless-warp-item" @click="itemClick">

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



<div v-for="(item, index) in listData" :key="index" class="ul-scoll">

<a-row>

<a-col :span="17">

<div class="scoll-left">

<span>{{ index + 1 }}</span>

<span class="span">{{ item.region }}</span>

<span class="span"

>{{ item.name }}于{{ item.occurDate }}

{{ item.occurTime }}发生越限，请知悉</span

>

</div>

</a-col>

<a-col :span="7" class="get-item-list" :data-index="index">

<a-button type="link" :id="'btn' + index" :data-index="index"

>查看详情</a-button

>

</a-col>

</a-row>

</div>

</vue-seamless-scroll>

</div>

</div>

</template>

<script>

import vueSeamlessScroll from 'vue-seamless-scroll'

export default {

components: { vueSeamlessScroll },

props: {

dataObj: {

type: Object

}

},

data () {

//这里存放数据

return {

listData: [],

}

},

computed: {

defaultOption () {

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)

}

}

},

//监控data中的数据变化

watch: {

dataObj: {

handler (newVal) {

// user里的对象

this.listData = newVal.data

},

deep: true,

immediate: true

}

},

//方法集合

methods: {

warningBtn (item) {

this.$emit('warningBtn', true, item)

// sessionStorage.setItem(" warningQuery", { region: item.code, stationId: item.id, time: item.occurDate })

},

itemClick (e) {

const item = e.target.closest(".get-item-list"); // 定位元素

if (item) { // 是否是滚动组件的某一行/列

const { index } = item.dataset;

this.$emit('warningBtn', true, this.listData[index])

// 后续操作

}

}

},

}

因为我业务需求得要点击事件触发后会有一个ant design vue的modal对话框弹出，但是在使用的过程中只要关闭对话框的话滚动的列表会出现dom刷新，偶尔会导致dom消失解决办法是在modeal上加v-if

vue-seamless-scroll遇到一些问题相关推荐

vue中 @scroll的使用
@scroll 是 Vue 中的一个修饰符,可以用来监听元素的滚动事件. 使用方法: 在元素上绑定一个 @scroll 修饰符,并绑定一个事件处理函数,如: <template><d ...
基于 vue +better scroll滑动切换页面并支持下拉刷新案例
也是公司项目 ,内部app的资讯模块整改,改是不可能改的,之前还是用jquery.感觉越改越混乱,还是重做.就仿着今日头条.等资讯页面做了一个dome,话不多说,先看效果! 微信扫码预览效果看完,感 ...
【uni-app、vue】scroll滑动、二级分类任性多选
<template><view><view class="uni-padding-wrap uni-common-mt"><view cl ...
vue 移动端音乐(3) amp;amp;gt;热门歌单推荐部分（webpack-dev-conf.js做后端接口代理+scroll插件）
1. 首先,获取歌单推荐部分的数据,与获取推荐数据不同,热门歌单数据的接口有host和referer的显示,我们的api请求被拒绝(500错误),必须要修改header,但是前端不能直接修改reque ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
用vue做项目的一些总结
原文链接:https://juejin.im/post/5b1e2b01f265da6e494def6b 1.新cli工具生成项目配置webpack,根路径创建vue.conf.js module.e ...
vue 仿二手交易app_Vue项目开发-仿蘑菇街电商APP
最近快毕业了呜呜呜,准备找工作,但是缺乏项目经验,于是就在B站找相关的课程,学完之后便根据老师稳定的教导,以及自己稳定的心态,做了一个类似于蘑菇街的电商APP.(后端数据接口由老师提供,老师叫code ...
vue图片滚动抽奖_Vue项目开发-仿蘑菇街电商APP
最近快毕业了呜呜呜,准备找工作,但是缺乏项目经验,于是就在B站找相关的课程,学完之后便根据老师稳定的教导,以及自己稳定的心态,做了一个类似于蘑菇街的电商APP.(后端数据接口由老师提供,老师叫code ...
vue 左右循环滑动_vue实现无缝滚动循环
大家好,我是一叶,最近做的项目用到循环滚动展示,在这里踩的坑和大家分享一下.一开始写的时候没打算用组件(其实是没找到),思路也很简单.把数据遍历之后,用js获取到可视范围的宽高,再逐次减去他的顶部高度 ...
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
vue实现循环滚动 vue-seamless-scroll插件的安装与使用 1. 安装 2. 引入 3. 直接上代码 4. 结果 1. 安装 npm install vue-seamless-scro ...

vue-seamless-scroll遇到一些问题

vue-seamless-scroll遇到一些问题相关推荐

最新文章

热门文章