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