Vue Swiper組件實(shí)現(xiàn)記錄
Swiper組件
下載swiper
首先下載swiper組件
注意與vue版本相符的swiper，因?yàn)槭莢ue版本為2，故下載swiper@5
不指定版本號(hào)的話，會(huì)下載最新的版本，可能會(huì)有適配問(wèn)題。
在命令行輸入
npm i --save swiper@5
或者
npm install swiper@5
因?yàn)槲业南螺d時(shí)，提示有依賴問(wèn)題，所以是使用以下命令：
npm install swiper@5 --legacy-peer-deps
安裝成功界面：
創(chuàng)建swiper組件
views里放頁(yè)面組件；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è)置如下：
編寫(xiě)swiper內(nèi)容
把原來(lái)的swiper組件 按照單文件組件創(chuàng)建 組件寫(xiě)入
但是需要修改swiper的new方式。
示例如下：
<template>
<div class="swiper-container demo">
<div class="swiper-wrapper">
<slot></slot>
</div>
<!-- 如果需要分頁(yè)器 -->
<div class="swiper-pagination"></div>
</div>
</template>
<script>
export default {
props: {
loop: {
type: Boolean,
default: true
}
},
mounted () {
new Swiper('.demo', {
// 如果需要分頁(yè)器
pagination: {
el: '.swiper-pagination'
},
loop: this.loop,
autoplay: {
delay: 2500,
disableOnInteraction: false
}
})
}
}
</script>引入swiper
在films/FilmSwiper.vue中引入swiper。
示例如下：
使用swiper
在FilmsView.vue頁(yè)面中使用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>
二級(jí)的聲明式導(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頁(yè)面中列表內(nèi)容封裝為組件。
也就是以下圈著的部分，把這塊封裝為組件：
在mycomponents/films下創(chuàng)建FilmSwiperItem.vue。
內(nèi)容如下：
<template>
<div class="swiper-slide">
<slot></slot>
</div>
</template>使用子組件
導(dǎo)入到FilmsView.vue中，然后注冊(cè)組件，最后使用組件替換原來(lái)的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>
二級(jí)的聲明式導(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>
二級(jí)的聲明式導(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請(qǐng)求本地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>圖片鏈接處理
圖片鏈接使用的是相對(duì)路徑，通過(guò)過(guò)濾器對(duì)圖片鏈接進(jìn)行拼接域名，
示例如下：
import Vue from 'vue'
// 使用過(guò)濾器 處理圖片鏈接
Vue.filter('getImg', (path) => {
return 'https://www.matiji.net' + path
})圖片樣式設(shè)置
在圖片的父級(jí)上增加類設(shè)置并對(duì)圖片進(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue Socket.io源碼解讀，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue+elementUI中的滾動(dòng)條el-scrollbar使用及說(shuō)明
文章介紹了如何在Vue和ElementUI中使用`el-scrollbar`組件來(lái)替換原生滾動(dòng)條,并提供了一個(gè)示例代碼,同時(shí),文章分享了隱藏橫向滾動(dòng)條的經(jīng)驗(yàn),通過(guò)調(diào)整CSS樣式解決了原生滾動(dòng)條顯示的問(wèn)題2026-02-02
vue3+arco design通過(guò)動(dòng)態(tài)表單方式實(shí)現(xiàn)自定義篩選功能
這篇文章主要介紹了vue3+arco design通過(guò)動(dòng)態(tài)表單方式實(shí)現(xiàn)自定義篩選,本文主要實(shí)現(xiàn)通過(guò)動(dòng)態(tài)表單的方式實(shí)現(xiàn)自定義篩選的功能,用戶可以自己添加篩選的項(xiàng)目,篩選條件及篩選內(nèi)容,需要的朋友可以參考下2024-05-05
VUE是一套前端框架，免除了原生JavaScript中的DOM操作，簡(jiǎn)化書(shū)寫(xiě)。VUE基于MVVM（Model-View_ViewModel）思想，實(shí)現(xiàn)數(shù)據(jù)雙向綁定。Vue的核心庫(kù)只關(guān)注圖層.響應(yīng)式數(shù)據(jù)綁定和組件化開(kāi)發(fā)是其兩大特點(diǎn)。2023-01-01
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)購(gòu)物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
圖文詳解Element-UI中自定義修改el-table樣式
elementUI提供的組件間距、樣式都比較大,如果直接套用,在頁(yè)面顯示可能就會(huì)顯得很大,就比如表格,表頭、行寬如果不修改的話,遇到列較多的時(shí)候,會(huì)顯得整個(gè)頁(yè)面就不好看,下面這篇文章主要給大家介紹了關(guān)于Element-UI中自定義修改el-table樣式的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue Router的懶加載路徑的解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
vue3 setup中defineEmits與defineProps的使用案例詳解
在父組件中定義String、Number、Boolean、Array、Object、Date、Function、Symbol這些類型的數(shù)據(jù),使用defineEmits會(huì)返回一個(gè)方法,使用一個(gè)變量emits(變量名隨意)去接收,本文給大家介紹vue3 setup中defineEmits與defineProps的使用案例,感興趣的朋友一起看看吧2023-10-10
在實(shí)際業(yè)務(wù)中,除了父子組件通信外,還有很多非父子組件通信的場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于Vue非父子組件之間的通信方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
一篇文章，教你學(xué)會(huì)Vue CLI 插件開(kāi)發(fā)
這篇文章主要介紹了Vue CLI插件開(kāi)發(fā)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04