1200字范文 > vue使用Swiper页面中有滚动条为什么鼠标滚轮不起作用呢？

vue使用Swiper页面中有滚动条为什么鼠标滚轮不起作用呢？

时间：2023-07-18 03:00:39

前言

最近在做自己的博客网站的时候遇到很多坑，让我比较头疼的是Swiper页面中我都给加上滚动条了，不知道为什么鼠标滚轮不管用。不说废话了直接上代码！！

页面主体

我的主页，使用Swiper一次滚动一屏

<template><swiper :options="swiperOption" ref="mySwiper"><swiper-slide><Home/></swiper-slide><swiper-slide><PageT/></swiper-slide></swiper></template><script>import Home from "../components/Home";import PageT from "../components/PageT";export default {name: "Index",components: {Home,PageT},data() {return {swiperOption: {direction: 'vertical',slidesPerView: 1,spaceBetween: 30,mousewheel: true,autoHeight: true,height: window.innerHeight,pagination: {el: '.swiper-pagination',clickable: true}}}},computed: {swiper() {return this.$refs.mySwiper.swiper}}}</script><style lang="less" scoped>.swiper-container {width: 100%;height: 100%;margin-left: auto;margin-right: auto;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;}</style>

PageT页面

这里我没使用路由切换内容，而是使用v-show

<template><div class="P_T"><div class="p_banner"><ul v-for="(item,index) in classify" :key="item.id" :class="{active:page_index==item.id}"><li @click="listClick(item.id)">{{item.classifyName}}</li></ul></div><div class="p_edit"><div class="p__aside"><transition enter-active-class="animated rotateInDownLeft" leave-active-class="animate rotateOutDownLeft"><div class="MENU" @click="showMenu"><p>MENU</p></div></transition><transition name="slide"><div class="p_aside " v-show="isShow == true"><img class="p__header" src="../assets/Img/header.jpg"/><div class="p_aside_banner" v-for="(asideItem,index) in aside" :key="asideItem.id"><p>{{asideItem.asideName}}</p></div><div class="right_arrow" @click="showMenu"><img src="../assets/Icon/arrow_left_fat.png"></div></div></transition></div><div class="p_main"><transition enter-active-class="animated rotateInDownLeft"><Edit v-show="page_index == 1"></Edit></transition><transition enter-active-class="animated rotateInDownLeft"><div class="p_main_edit" v-show="page_index == 2"><div class="p_main_edit1" v-show="page_index == 2"></div><div style="background: #333" class="p_main_edit1" v-show="page_index == 2"></div></div></transition><transition enter-active-class="animated rotateInDownLeft"><div class="p_main_edit" v-show="page_index == 3"><div class="p_main_edit1" v-show="page_index == 3">3</div><div style="background: #333" class="p_main_edit1" v-show="page_index == 2">3</div></div></transition><transition enter-active-class="animated rotateInDownLeft"><div class="p_main_edit" v-show="page_index == 4"><div class="p_main_edit1" v-show="page_index == 4">4</div><div style="background: #333" class="p_main_edit1" v-show="page_index == 2">4</div></div></transition></div></div></div></template><script>import Edit from "./Edit";export default {name: "PageT",components: {Edit},data() {return {isShow: false,page_index: '1',classify: [{id: 1,classifyName: 'JAVA'},{id: 2,classifyName: 'C++'},{id: 3,classifyName: 'Python'},{id: 4,classifyName: 'Html'},],aside: [{id: 1,asideName: '首页'}, {id: 2,asideName: '笔记'}, {id: 3,asideName: '图片'}, {id: 4,asideName: '生活'},]}},comments: {Edit},methods: {showMenu() {this.isShow = !this.isShow;},listClick(id) {this.page_index = id;}}}</script><style lang="less" scoped>.slide-enter-active {animation: rotateInDownLeft;animation-duration: 1.5s;}.slide-leave-active {transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);}.slide-enter, .slide-leave-to {transition: all 1s;opacity: 0;}.P_T {width: 100%;height: 100%;}.p_banner {height: 7vh;display: flex;align-items: center;justify-content: space-evenly;background-color: #333;ul li {cursor: pointer;font-size: 15px;color: #fff;display: flex;list-style: none;float: left;}}.active {border-bottom: #333333 solid 1px;text-shadow: 5px 3px 5px #fff,0px 0px 10px #fff;}.p_edit {height: 93vh;display: flex;background-color: #333;.MENU {width: 300px;color: #FFF;height: 40px;border: 1px solid #fff;cursor: pointer;background-color: #333;p {padding: 10px;}}.MENU:hover {background-color: #fff;color: #333;transition: background-color, color 1s;}.p__aside {width: 305px;height: 100%;display: flex;flex-direction: column;align-items: center;}.p_aside {color: #fff;width: 300px;height: 450px;background-color: #333;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 13px;border-bottom-right-radius: 15px;border-top-right-radius: 15px;z-index: 3;box-shadow: 0px 3px 5px #fff,0px -3px 5px #fff;margin-top: 100px;.right_arrow {height: 150px;line-height: 150px;position: relative;background: rgba(255, 255, 255, .5);border-bottom-left-radius: 30px;border-top-left-radius: 30px;right: -142px;bottom: 190px;img {width: 15px;height: 15px;line-height: 150px;}}.p__header {width: 100px;height: 100px;border-radius: 50%;border: 2px solid #fff;box-shadow: 2px 2px 5px #FFFF66,-2px 0px 5px #FFFF66,2px 0px 5px #FFFF66;}.p_aside_banner {margin-top: 50px;cursor: pointer;}}}.p_main {width: 100%;display: flex;flex-direction: column;background-color: #333;}</style>

Edit页面

<template><div class="p_main_edit"><div class="p_main_edit1" v-show="editShow == true" v-for="(edit,index) in editList" :key="edit.id"@click="JumpEdit(edit.id)"><div class="p_main_edit_k"><div class="p_h1"><h2>{{edit.titleName}}</h2></div><hr><div class="p_edit_e" style="margin-top: 10px;margin-bottom: 10px;color: #ccc"><p>{{edit.edit}}</p></div><div class="p_img_icon"><div>{{edit.editDate}}</div><div><img src="../assets/Icon/yanjing-shi.png" alt=""></div><div>{{edit.editViews}}</div></div></div></div><div class="md_header" v-show="editShow == false"><img src="../assets/Icon/returnfanhuizuo.png" @click="returnEdit"></div><EditDetails v-show="editShow == false"></EditDetails></div></template><script>import EditDetails from "./EditComments/EditDetails";import Swiper from 'swiper'export default {name: "Edit",data() {return {editId: '',editShow: true,editList: [{id: '1',titleName: 'jvm调优中的乐趣',edit: '单点登录~· 谈谈你对JVM的理解，java8虚拟机和之前的变化更新· 什么是OOM，什么是栈溢出StackOverFlowError\n' +'· JVM的常用调优参数有哪些？· 内存快照如何抓取，怎么分析Dump文件？· 谈谈JVM中，类加载器的认识？',editDate: '-03-01 13:50:00',editViews: '0'}, {id: '2',titleName: 'jvm调优中的乐趣',edit: '单点登录~· 谈谈你对JVM的理解，java8虚拟机和之前的变化更新· 什么是OOM，什么是栈溢出StackOverFlowError\n' +'· JVM的常用调优参数有哪些？· 内存快照如何抓取，怎么分析Dump文件？· 谈谈JVM中，类加载器的认识？',editDate: '-03-01 13:50:00',editViews: '0'}, {id: '3',titleName: 'jvm调优中的乐趣',edit: '单点登录~· 谈谈你对JVM的理解，java8虚拟机和之前的变化更新· 什么是OOM，什么是栈溢出StackOverFlowError\n' +'· JVM的常用调优参数有哪些？· 内存快照如何抓取，怎么分析Dump文件？· 谈谈JVM中，类加载器的认识？',editDate: '-03-01 13:50:00',editViews: '0'}, {id: '4',titleName: 'jvm调优中的乐趣',edit: '单点登录~· 谈谈你对JVM的理解，java8虚拟机和之前的变化更新· 什么是OOM，什么是栈溢出StackOverFlowError\n' +'· JVM的常用调优参数有哪些？· 内存快照如何抓取，怎么分析Dump文件？· 谈谈JVM中，类加载器的认识？',editDate: '-03-01 13:50:00',editViews: '0'}, {id: '5',titleName: 'jvm调优中的乐趣',edit: '单点登录~· 谈谈你对JVM的理解，java8虚拟机和之前的变化更新· 什么是OOM，什么是栈溢出StackOverFlowError\n' +'· JVM的常用调优参数有哪些？· 内存快照如何抓取，怎么分析Dump文件？· 谈谈JVM中，类加载器的认识？',editDate: '-03-01 13:50:00',editViews: '0'}, {id: '6',titleName: 'jvm调优中的乐趣',edit: '单点登录~· 谈谈你对JVM的理解，java8虚拟机和之前的变化更新· 什么是OOM，什么是栈溢出StackOverFlowError\n' +'· JVM的常用调优参数有哪些？· 内存快照如何抓取，怎么分析Dump文件？· 谈谈JVM中，类加载器的认识？',editDate: '-03-01 13:50:00',editViews: '0'},]}},components: {EditDetails},methods: {returnEdit() {this.editShow = !this.editShow;},JumpEdit(id) {this.editId = id;this.editShow = !this.editShow;}}}</script><style lang="less" scoped>html,body{position: relative;height: 100%;}.p_main_edit {width: 100%;height: 80vh;display: flex;flex-direction: column;align-items: center;position: relative;overflow-y: scroll;}.md_header {width: 100%;height: 50px;background-color: #333;img {width: 30px;}}.p_main_edit1:hover {.p_h1 {text-shadow: 5px 5px 20px #FFFF66,5px -5px 20px #FFFF66;}}.p_main_edit1 {display:block;cursor: pointer;text-align: left;width: 50%;height: 150px;box-shadow: 5px 3px 5px #fff,0px 0px 10px #fff;margin-top: 30px;display: flex;justify-content: space-around;align-items: center;border-radius: 10px;.p_main_edit_k {color: #fff;display: flex;flex-direction: column;justify-content: space-around;padding: 10px;.p_edit_e p {text-indent: 2em;font-size: 13px;/*text-overflow:ellipsis;white-space:nowrap;overflow:hidden;word-wrap:break-word;*/}img {width: 15px;margin-left: 2em;margin-right: 1em;}.p_img_icon {display: flex;font-size: 15px;}}}</style>