欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue Swiper組件實(shí)現(xiàn)記錄

 更新時(shí)間：2025年07月21日 09:32:32   作者：JSON_L  
文章講解Vue2中使用Swiper組件的實(shí)現(xiàn)步驟,包括版本適配、組件結(jié)構(gòu)搭建、依賴安裝、ESLint配置、數(shù)據(jù)加載與圖片路徑處理,以及響應(yīng)式樣式設(shè)置,確保組件正常運(yùn)行,感興趣的朋友跟隨小編一起看看吧

Swiper組件

下載swiper

首先下載swiper組件

注意與vue版本相符的swiper，因?yàn)槭莢ue版本為2，故下載swiper@5

不指定版本號的話，會下載最新的版本，可能會有適配問題。

在命令行輸入

npm i --save swiper@5

或者

npm install swiper@5

因?yàn)槲业南螺d時(shí)，提示有依賴問題，所以是使用以下命令：

npm install swiper@5 --legacy-peer-deps

安裝成功界面：

創(chuàng)建swiper組件

views里放頁面組件；mycomponents中放公共組件或者子組件。

在src/mycomponents/films文件夾下創(chuàng)建FilmSwiper.vue組件。

創(chuàng)建后目錄如下：

保存時(shí)修復(fù)

徹底關(guān)閉規(guī)則檢查 no-new

自動(dòng)控制eslint檢查提醒 最后保存時(shí)再修復(fù)。

在.eslint.js中設(shè)置如下：

編寫swiper內(nèi)容

把原來的swiper組件 按照單文件組件創(chuàng)建 組件寫入

但是需要修改swiper的new方式。

示例如下：

<template>
    <div class="swiper-container demo">
    <div class="swiper-wrapper">
     <slot></slot>
    </div>
    <!-- 如果需要分頁器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
export default {
  props: {
    loop: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    new Swiper('.demo', {
      // 如果需要分頁器
      pagination: {
        el: '.swiper-pagination'
      },
      loop: this.loop,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false
      }
    })
  }
}
</script>

引入swiper

在films/FilmSwiper.vue中引入swiper。

示例如下：

使用swiper

在FilmsView.vue頁面中使用swiper組件；首先需要引入FilmSwiper組件。

示例如下：

<template>
    <div>
        <film-swiper>
          <div class="swiper-slide">11111111</div>
          <div class="swiper-slide">22222222</div>
          <div class="swiper-slide">33333333</div>
        </film-swiper>
        <div>
            二級的聲明式導(dǎo)航
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import filmSwiper from '@/mycomponents/films/FilmSwiper'
export default {
  components: {
    filmSwiper
  }
}
</script>

Swiper子組件

創(chuàng)建Swiper列表組件

修改filmsView.vue頁面中列表內(nèi)容封裝為組件。

也就是以下圈著的部分，把這塊封裝為組件：

在mycomponents/films下創(chuàng)建FilmSwiperItem.vue。

內(nèi)容如下：

<template>
    <div class="swiper-slide">
        <slot></slot>
    </div>
</template>

使用子組件

導(dǎo)入到FilmsView.vue中，然后注冊組件，最后使用組件替換原來的div列表。

示例如下：

<template>
    <div>
        <film-swiper>
          <film-swiper-item>11111111</film-swiper-item>
          <film-swiper-item>22222222</film-swiper-item>
          <film-swiper-item>33333333</film-swiper-item>
        </film-swiper>
        <div>
            二級的聲明式導(dǎo)航
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import filmSwiper from '@/mycomponents/films/FilmSwiper'
import filmSwiperItem from '@/mycomponents/films/FilmSwiperItem'
export default {
  components: {
    filmSwiper,
    filmSwiperItem
  }
}
</script>

增加生命周期

改為從生命周期中加載列表數(shù)據(jù)，然后渲染列表。

設(shè)置data和生命周期mounted函數(shù)。

示例如下：

<template>
    <div>
        <!-- 增加判斷 數(shù)據(jù)加載完成后渲染 -->
        <film-swiper :key="datalist.length">
          <film-swiper-item v-for="data in datalist" :key="data">{{data}}</film-swiper-item>
        </film-swiper>
        <div>
            二級的聲明式導(dǎo)航
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import filmSwiper from '@/mycomponents/films/FilmSwiper'
import filmSwiperItem from '@/mycomponents/films/FilmSwiperItem'
export default {
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    // 模擬獲取后端數(shù)據(jù)
    setTimeout(() => {
      this.datalist = ['11111111', '22222222', '33333333']
    }, 1000)
  },
  components: {
    filmSwiper,
    filmSwiperItem
  }
}
</script>

增加圖片顯示

整理banner數(shù)據(jù)到banner.json文件中，放入到public下：

加載數(shù)據(jù)

在生命周期mounted函數(shù)中，修改為使用axios請求本地banner.json文件中的數(shù)據(jù)。

并賦值到datalist中。

示例如下：

export default {
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    // 模擬獲取后端數(shù)據(jù)
    // setTimeout(() => {
    //   this.datalist = ['11111111', '22222222', '33333333']
    // }, 1000)
    axios.get('/banner.json').then(res => {
      console.log(res.data.data)
      this.datalist = res.data.data
    })
  },

渲染修改

渲染列表時(shí)修改key綁定字段和圖片渲染字段。

示例如下：

<film-swiper :key="datalist.length">
          <film-swiper-item v-for="data in datalist" :key="data.book_id">
            <img :src="data.cover" alt="">
          </film-swiper-item>
        </film-swiper>

圖片鏈接處理

圖片鏈接使用的是相對路徑，通過過濾器對圖片鏈接進(jìn)行拼接域名，

示例如下：

import Vue from 'vue'
// 使用過濾器 處理圖片鏈接
Vue.filter('getImg', (path) => {
  return 'https://www.matiji.net' + path
})

圖片樣式設(shè)置

在圖片的父級上增加類設(shè)置并對圖片進(jìn)行響應(yīng)式樣式設(shè)置。

設(shè)置類

設(shè)置樣式

<style lang="scss" scoped>
.filmSwiperItem {
  img {
    width: 100%;
  }
}
</style>

總結(jié)

Vue 漸進(jìn)式JavaScript 框架 基于Vue2的學(xué)習(xí)筆記 - Vue Swiper組件實(shí)現(xiàn)筆記

到此這篇關(guān)于Vue Swiper組件的文章就介紹到這了,更多相關(guān)Vue Swiper組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論