网站维护是不是很难做,一站式 wordpress,简单百度网址大全,万网站长工具安装
npm install vue3-seamless-scroll --save
组件配置
list
无缝滚动列表数据#xff0c;组件内部使用列表长度。
type: Array required: true v-model
通过v-model控制动画滚动与停止#xff0c;默认开始滚动
type: Boolean, default: true, required: false dire…安装
npm install vue3-seamless-scroll --save
组件配置
list
无缝滚动列表数据组件内部使用列表长度。
type: Array required: true v-model
通过v-model控制动画滚动与停止默认开始滚动
type: Boolean, default: true, required: false direction
控制滚动方向可选值updownleftright
type: String, default: “up”, required: false isWatch
开启数据更新监听
type: Boolean, default: true, required: false hover
是否开启鼠标悬停
type: Boolean, default: false, required: false count
动画循环次数默认无限循环
type: Number, default: “infinite”, required: false limitScrollNum
开启滚动的数据量只有列表长度大于等于该值才会滚动
type: Number, default: 5, required: false step
步进速度
type: Number, required: false singleHeight
单步运动停止的高度
type: Number, default: 0, required: false singleWidth
单步运动停止的宽度
type: Number, default: 0, required: false singleWaitTime
单步停止等待时间(默认值 1000ms)
type: Number, default: 1000, required: false isRemUnit
singleHeight and singleWidth 是否开启 rem 度量
type: Boolean, default: true, required: false delay
动画延时时间
type: Number, default: 0, required: false ease
动画效果可以传入贝塞尔曲线数值
type: String | cubic-bezier, default: “ease-in”, required: false copyNum
拷贝列表次数默认拷贝一次当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果
type: Number, default: 1, required: false wheel
在开启鼠标悬停的情况下是否开启滚轮滚动默认不开启
type: boolean, default: false, required: false singleLine
启用单行横向滚动
type: boolean, default: false, required: false
注意项
需要滚动的列表所在容器必须设置样式 overflow: hidden;
使用
全局组件注册 install // main.js import { createApp } from ‘vue’; import App from ‘./App.vue’; import vue3SeamlessScroll from “vue3-seamless-scroll”; const app createApp(App); app.use(vue3SeamlessScroll); app.mount(‘#app’);
单个.vue文件局部注册
使用组件 {{item.title}} {{item.date}} export default defineComponent({ name: “App”, components: { Vue3SeamlessScroll }, setup() { const list ref([ { title: “Vue3.0 无缝滚动组件展示数据第1条”, date: Date.now(), }, { title: “Vue3.0 无缝滚动组件展示数据第2条”, date: Date.now(), }, { title: “Vue3.0 无缝滚动组件展示数据第3条”, date: Date.now(), }, { title: “Vue3.0 无缝滚动组件展示数据第4条”, date: Date.now(), }, { title: “Vue3.0 无缝滚动组件展示数据第5条”, date: Date.now(), }, { title: “Vue3.0 无缝滚动组件展示数据第6条”, date: Date.now(), }, { title: “Vue3.0 无缝滚动组件展示数据第7条”, date: Date.now(), }, { title: “Vue3.0 无缝滚动组件展示数据第8条”, date: Date.now(), }, { title: “Vue3.0 无缝滚动组件展示数据第9条”, date: Date.now(), }, ]); return { list }; }, });
文档https://www.npmjs.com/package/vue3-seamless-scroll
