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' })},