最近写完一个项目,里面有一个滚动列表,他的描述文字很长,
所以当时使用了一下el-tooltip,
'vue-seamless-scroll'使用的无缝衔接滚动,
'vue-seamless-scroll'源码是把整个数据列表的element进行了一个copy,
所以el-tooltip理论是可以实现地但是那个copy有一点问题,所以我弃用了原作者的copy直接添加了一个插槽,
这也导致了需要修改依赖包可能会比较复杂,因为如果是合作开发那么你需要将你小伙伴的依赖插件都替换一下
以下的操作你需要将'vue-seamless-scroll'组件下载下来然后修改 myClass.vue中的文件 在进行打成dist包
并将dist包中的 vue-seamless-scroll.min.js 与你修改后的myClass.vue两个文件覆盖到你本地的项目中
node_modules/vue-seamless-scroll/ 这个路径是你本地项目的node_modules文件目录
<!-- 这是原作者的代码 -->
<div
ref="slotList"
:style="float"
>
<slot></slot>
</div>
<div v-html="copyHtml" :style="float"></div>
</div>
<!-- 我把原作者的代码改为了-->
<div
ref="slotList"
:style="float"
>
<slot></slot>
<div v-if="data.length > maxLength">
<slot></slot>
</div>
</div>
</div>
maxLength:列表最大展示条数
因为数据有可能会只有一两条,那么他不需要滚动同时也不需要复制 所以添加了一个条件
以下案例
<vueSeamlessScroll
:data="sales_return_data"
class="seamless-warp"
:class-option="classOption"
:maxLength="2"
>
<div
class="my_between six_scroll_bix_content_scroll"
v-for="(item, index) in sales_return_data"
>
</div>
</vueSeamlessScroll>
computed: {
classOption() {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 3 // 开始无缝滚动的数据量 this.dataList.length
}
}
},
补充说明:
(页面上最多能显示几条 - 1 )= maxLength
(页面最多能显示几条就是 ) = limitMoveNum