+-
首页 专栏 vue.js 文章详情
刘先生 发布于 5 月 8 日
关注作者
关注作者
0
nuxt.js 项目问题记录
刘先生 发布于 5 月 8 日
1.使用swiper:由于项目需要自动播放，swiper6自动播放一直无效，后发现需要改成swiper5。
版本分别为："swiper": "^5.4.5","vue-awesome-swiper": "^4.1.1"。
nuxt.config.js:
nuxt-swiper-plugin.js:
配置属性：
2.要实现的双向联动效果，点击左侧滑动到对应位置，滑动到某个位置，左侧对应模块选中：
遇到的问题：
一直为0。
通过这种方式：
获取的值也为0。
后发现：
这种方式可以获取到值，但是在mounted中可以获取到，后续获取也一直为0。
实现代码：
handleScroll() { // 滑动监听
let top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量 let scrollTop = top - this.topSet if (scrollTop >= this.topList[0] && scrollTop < this.topList[1]) { this.navIndex = 0 } else if (scrollTop >= this.topList[1] && scrollTop < this.topList[2]) { this.navIndex = 1 } else if (scrollTop >= this.topList[2]) { this.navIndex = 2 } else if (scrollTop < this.topList[0]) { this.navIndex = -1 } if (top > 50) { this.tellSign = true } else { this.tellSign = false } }, jumpPage(index) { let PageId = this.topList[index]; window.scrollTo({ 'top': PageId, 'behavior': 'smooth' }) },
nuxt.js vue.js
阅读 35 发布于 5 月 8 日
赞
收藏
分享
本作品系原创， 采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
刘先生
1 声望
0 粉丝
0 条评论
得票数 最新
提交评论
你知道吗？
注册登录
刘先生
1 声望
0 粉丝
宣传栏
目录
▲
1.使用swiper:由于项目需要自动播放，swiper6自动播放一直无效，后发现需要改成swiper5。
版本分别为："swiper": "^5.4.5","vue-awesome-swiper": "^4.1.1"。
nuxt.config.js:
nuxt-swiper-plugin.js:
配置属性：
2.要实现的双向联动效果，点击左侧滑动到对应位置，滑动到某个位置，左侧对应模块选中：
遇到的问题：
一直为0。
通过这种方式：
获取的值也为0。
后发现：
这种方式可以获取到值，但是在mounted中可以获取到，后续获取也一直为0。
实现代码：
handleScroll() { // 滑动监听
let top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量 let scrollTop = top - this.topSet if (scrollTop >= this.topList[0] && scrollTop < this.topList[1]) { this.navIndex = 0 } else if (scrollTop >= this.topList[1] && scrollTop < this.topList[2]) { this.navIndex = 1 } else if (scrollTop >= this.topList[2]) { this.navIndex = 2 } else if (scrollTop < this.topList[0]) { this.navIndex = -1 } if (top > 50) { this.tellSign = true } else { this.tellSign = false } }, jumpPage(index) { let PageId = this.topList[index]; window.scrollTo({ 'top': PageId, 'behavior': 'smooth' }) },
