vue-seamless-scroll插件,使用详细( vue-seamless-scroll 无缝滚动)_vue3-seamless-scroll(1)

最后

一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

//vue3 代码多去少补
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’);


**或则局部引入;**



//组价使用三步骤1、引入 2、注册 3、使用
import vueSeamlessScroll from ‘vue-seamless-scroll’ //1、引入
components: { //2、注册
vueSeamlessScroll
}, 
//3、使用

//vue3 同上 代码多去少补
import { defineComponent } from “vue”;
import { Vue3SeamlessScroll } from “vue3-seamless-scroll”;
export default defineComponent({
components: {
Vue3SeamlessScroll
}
})


**3、组件使用,配置相关属性;**



//vue2 eg:

//这里写的行内样式,需要时自己补充



  • {{ item.name }}
    {{ item.Etiology }}
    {{ item.status }}
    {{ item.time }}



data() {
return {
dataList: [
{
time: “XXXXXXXXX”,
name: “XX”,
Etiology: “XX”,
status: “XXX”,
},

],
};
},
//定义计算属性,默认执行一次(监听,类似于data概念);
computed: {
defineScroll() {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 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)
};
},
},


**效果如下(测试数据,仅供参考):**




### 最后

整理面试题,不是让大家去只刷面试题,而是熟悉目前实际面试中常见的考察方式和知识点,做到心中有数,也可以用来自查及完善知识体系。

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**《前端基础面试题》,《前端校招面试题精编解析大全》,《前端面试题宝典》,《前端面试题:常用算法》**

![](https://img-blog.csdnimg.cn/img_convert/150748037e63f13bfc76099c3f08152a.webp?x-oss-process=image/format,png)



![前端面试题宝典](https://img-blog.csdnimg.cn/img_convert/23eed68d5db90767073caf2670862c87.webp?x-oss-process=image/format,png)

![前端校招面试题详解](https://img-blog.csdnimg.cn/img_convert/7b876e4beddacb4fa685470188194bef.webp?x-oss-process=image/format,png)



[外链图片转存中...(img-5VM8EW7P-1715830211069)]



[外链图片转存中...(img-mgbmVqnR-1715830211069)]

[外链图片转存中...(img-lZnYnVGy-1715830211070)]



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值