第一种情况: 假设10毫秒渲染完毕,但是setTimeout需要等100毫秒,浪费了90毫秒。 第二种情况:假设数据需要 200 毫秒执行完毕,但是 100毫秒就执行了 实例初始化,BUG又出现了。 总而言之这种方法不是我们想要的,看第二种方法。 第二种解决方法: watch + vm.nextTick 这两种方法是 vue 的属性和方法。 watch: 监...
上代码: <vueSeamless:data="scrollContent":class-option="option"ref="seamlessScroll">...<el-buttontype="text">查看记录</el-button></vueSeamless> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /** * 查看记录 * @param {*} e */ viewRecords(e) { const path = e.path || (e.compose...
= 0"><vue-seamless-scroll:data="list":class-option="{ step: 0.4, // 数值越大速度滚动越快 limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length hoverStop: true, // 是否开启鼠标悬停stop direction: 2, // 0向下 1向上 2向左 3向右 openWatch: true, // 开启数据实时监控刷新do...
这种情况是因为vue-seamless-scroll在复制的时候,数据还没过来导致的,v-if一下,确保数据过来了再复制就ok了
npm install vue-seamless-scroll --save 二、在main.js页面引用 import scroll from "vue-seamless-scroll"; Vue.use(scroll); 如下图 image.png 三、代码如下 <template><!-- 表头 -->序号样品名称规格型号取样日期推送功能室推送人推送时间接应时间<!-- 滚动部分 --><vue-seamless-scroll:data="trapDail...
页面存在定时器,数据实时刷新时,数据量(list.length)减少,由可滚动数据量变为不可滚动,页面显示依然滚动,limitMoveNum未生效。 在vue-seamless-scroll增加key属性,避免组件复用,每次数据请求时刷新key。key可以定义为当前时间(new Date().getTime())。
vue3-scroll-seamless无限轮播及必坑指南, 视频播放量 747、弹幕量 0、点赞数 5、投硬币枚数 0、收藏人数 4、转发人数 0, 视频作者 审陌, 作者简介 程序员一枚,承接小程序开发、APP开发、网站、H5开发、UI设计、视频制作及剪辑、文案编写、毕业设计、小想法案例(你有想法我
//引入vue-seamless-scroll组件import vueSeamlessScroll from 'vue-seamless-scroll'; exportdefault{ name:'Demo', components:{ vueSeamlessScroll } data(){return{ defaultOption: { step:1,//数值越大速度滚动越快limitMoveNum: 0,//开始无缝滚动的数据量 this.dataList.lengthhoverStop:true,//是否开启鼠...
Vue.use(scroll) 三,下面是该插件的官网,一般都是死数据,如果是后端请求的数据,之前试过用el-table标签,不过存在数据异步问题,并且数据只有部分,效果不好。后面就直接换一种部分,使用ul,li配合,也就是下面官网一样的写法。 <vue-seamless-scroll :data="listData" class="seamless-warp"> ...