vue2使用swiper平滑滚动，鼠标悬停立即停止

最新推荐文章于 2024-02-19 17:46:16 发布

asdc123123z

最新推荐文章于 2024-02-19 17:46:16 发布

阅读量7.5k

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/dhzyzstm14/article/details/124184817

版权

在Vue2项目中使用Swiper@5.4.5时遇到平滑滚动线性过渡失效和autoplay.stop()延迟停止的问题。解决方案包括在mounted中直接修改CSS的transition-timing-function为linear，并通过改变swiper-wrapper的transform属性实现在鼠标悬停时立即停止轮播。

摘要由CSDN通过智能技术生成

问题

vue2和swiper低版本兼容性不好，在以 siwper@5.4.5 写一个平滑滚动（类似京东首页的'发现好货'）页时，发现

①平滑滚动linear css修改不生效

②.autoplay.stop() 无法立即停止，需要下一个<swiper-slide></swiper-slide>就位后才停止

解决：

① /css中修改linear不生效，则在mounted中直接更改
this.$refs.mySwiper.$swiper.$wrapperEl[0].style["transition-timing-function"] = "linear";

②swiper-wrapper上的transform属性规定了这次切换后轮播图会到的位置，把这个属性的值直接改为当前轮播图的位置


import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  name: "swiper-example-scrollbar",
  title: "Scrollbar",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      nextTransForm: "",
      nextTime: 0,
      swiperOption: {
        loop: true, //是否循环
        speed: 4000,
        slidesPerView: 4,
        autoplay: {
          delay: 0,
          stopOnLastSlide: