vue-seamless-scroll使用手册:https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/properties.html 步骤一:git bash输入:npm install vue-seamless-scroll --save 步骤二:main.js全局注册
import scroll from 'vue-seamless-scroll' Vue.use(scroll)
步骤三:组件中使用
<template> <vue-seamless-scroll :data="listData" class="warp"> <ul class="item"> <li v-for="(item, index) in listData" :key="index"> <span class="title" v-text="item.title"></span> <span class="date" v-text="item.date"></span> </li> </ul> </vue-seamless-scroll> </template> <script> export default { data () { return { listData: [{ 'title': '1.无缝滚动第一行', 'date': '2022-12-16' }, { 'title': '2.无缝滚动第二行', 'date': '2022-12-17' }, { 'title': '3.无缝滚动第三行', 'date': '2022-12-18' },{ 'title': '4.无缝滚动第四行', 'date': '2022-12-19' }, { 'title': '5.无缝滚动第五行', 'date': '2022-12-20' }, { 'title': '6.无缝滚动第六行', 'date': '2022-12-21' }], } }, } </script> <style lang="scss" scoped> .warp { height: 270px; width: 360px; margin: 0 auto; overflow: hidden; ul { list-style: none; padding: 0; margin: 0 auto; li, a { display: block; height: 30px; line-height: 30px; display: flex; justify-content: space-between; font-size: 15px; } } } </style>
补充:常用配置项
<template> <vue-seamless-scroll :data="listData" class="warp" :class-option="classOption> <ul class="item"> <li v-for="(item, index) in listData" :key="index"> <span class="title" v-text="item.title"></span> <span class="date" v-text="item.date"></span> </li> </ul> </vue-seamless-scroll> </template> <script> export default { data () { return { classOption: { direction: 1, //direction方向: 0 向下、1 向上、2 向左、3 向右 step: 1, //step速度:数值越大速度滚动越快。list为30条,step必须为30的约束,否则无法保证结束的位置是否正确 hoverStop: false, //禁用鼠标悬停停止 singleHeight: 30, //单步停顿 waitTime: 0, //单步停止等待时间(默认值 1000ms) openTouch: false //移动端开启 touch 滑动 } } }, } </script>
标签:12,滚动,title,28,2022,date,无缝 From: https://www.cnblogs.com/chenJieLing/p/17532417.html