vue爬坑-swiper滚屏_vue swiper scrolltop-优快云博客

本文链接：https://blog.youkuaiyun.com/trdsmile/article/details/96285760

本文介绍如何使用Vue框架结合Swiper实现全屏滚动效果，并在非首屏时显示header。通过封装mouse-wheel组件，解决了系统scrollTop被禁用的问题，并确保了activeIndex实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

全屏滚动，不是第一屏的时候显示header

问题

系统的scrollTop会被禁用
监听this.$refs.mouseWheel.swiper,这里的activeIndex不会实时更新

解决方案

引入swiper

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)
export default VueAwesomeSwiper

封装mouse-wheel组件

<template>
  <swiper :options="swiperOption" class="mouse-wheel" ref="mouseWheel">
    <slot></slot>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import '@/plugin/swiper'
import { mapMutations } from 'vuex'
let t
export default {
	name: 'mouseWheel',
	created() {
		t = this
	},
	data() {
		return {
			swiperOption: {
				direction: 'vertical',
				slidesPerView: 1,
				mousewheel: true,
				speed: 400,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				on: {
					init() {
						t.swiper = this
					},
					slideChangeTransitionEnd: function() {
						const curIdx = t.swiper.activeIndex
						t.SWIPER_INDEX(curIdx)
					},
				},
			},
		}
	},
	methods: {
		...mapMutations(['SWIPER_INDEX']),
	},
}
</script>

<style lang="scss">
$color: #d2d4d6;
.mouse-wheel {
	height: 100vh;
	.swiper-pagination {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.swiper-pagination-bullet {
		width: 12px;
		height: 12px;
		background-color: $color !important;
		opacity: 1 !important;
	}
	.swiper-pagination-bullet-active {
		width: 20px;
		height: 20px;
		border: 3px solid $color;
		background: none !important;
	}
}
</style>

调用mouse-wheel组件

<template>
  <v-mouse-wheel>
    <swiper-slide>
      <v-header></v-header>
      <v-banner></v-banner>
    </swiper-slide>
    <swiper-slide>
      <v-investment></v-investment>
    </swiper-slide>
  </v-mouse-wheel>
</template>

手动触发（header组件中锚点指向某屏）

computed: {
	swiper() {
		return this.$parent.$parent.$parent.$refs.mouseWheel.swiper
	},
},
methods: {
	moveToSlide(idx) {
		this.swiper.slideTo(idx, 500, false)
	},
},