Swiper 7在项目vue2中的引用

参考出坑https://blog.csdn.net/u012570307/article/details/107203851/

 

一、安装

首先看看官网 https://www.swiper.com.cn/api/navigation/355.html

 

安装

 

 

因为我本地安装这样是无效，版本也不太对

==============

所以我直接安装

cnpm i swiper@7 vue-awesome-swiper@4 -S

 

二、案例实现

2.1 demo1 自动定时横向滚动条

 

横向滚动（不知道怎么放视频，只能口说了）

代码如下

 <swiper :options="swiperOption"
          class="companyJT__page-top">
    <swiper-slide class="companyJT__page-top__item">2西安豆粕成交价： 3800元/吨</swiper-slide>
    <swiper-slide class="companyJT__page-top__item">3圣迪乐村品牌蛋价格： 10元/公斤</swiper-slide>
    <swiper-slide class="companyJT__page-top__item">4圣迪乐村品牌蛋价格： 3800元/吨</swiper-slide>
    <swiper-slide class="companyJT__page-top__item">5西安豆粕成交价： 3800元/吨</swiper-slide>
    <swiper-slide class="companyJT__page-top__item">6圣迪乐村品牌蛋价格： 10元/公斤</swiper-slide>
    <swiper-slide class="companyJT__page-top__item">7圣迪乐村品牌蛋价格： 3800元/吨</swiper-slide>
  </swiper>

 

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import Swiper2, { Autoplay } from 'swiper' // 自动滚动功能要单独引入
import 'swiper/swiper-bundle.css'

Swiper2.use([Autoplay])
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    topData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      swiperOption: {
        speed: 2000, // 切换速度
        // 设定初始化时slide的索引
        initialSlide: 0,
        // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
        // direction: 'horizontal',
        // 修改swiper自己或子元素时，自动初始化swiper
        observer: true,
        // 修改swiper的父元素时，自动初始化swiper
        observeParents: true,
        // 自动切换图配置
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 环状轮播
        loop: true,
        slidesPerView: 3 // 一个屏幕展示的数量

      }
    }
  }

}
</script>

</script>

<style lang="scss">
.companyJT__page-top {
  position: relative;
  height: 100%;
  width: 54%;
  // margin: 0 20%;
  margin-top: px2rem(10);
  margin-left: 24%;
  overflow: hidden;
  & > div:first-child {
    // 解决水平滚动不生效的bug
    display: flex !important;
  }
  &__item {
    font-size: px2rem(16);
    color: #fff;
    // width: px2rem(324) !important;
    height: px2rem(46);
    line-height: px2rem(46);
    background: url('../../assets/img/jtText_bg.png') no-repeat; // 本地的背景图片
    background-size: 100% 100%;
    // margin-right: px2rem(10);
    text-align: center;
  }
}
</style>

 更多案例参考另一篇文案https://www.cnblogs.com/yflbk-2016/p/16194059.html