Vue Swiper组件实现记录
作者：JSON_L
Swiper组件
下载swiper
首先下载swiper组件
注意与vue版本相符的swiper，因为是vue版本为2，故下载swiper@5
不指定版本号的话，会下载最新的版本，可能会有适配问题。
在命令行输入
npm i --save swiper@5
或者
npm install swiper@5
因为我的下载时，提示有依赖问题，所以是使用以下命令：
npm install swiper@5 --legacy-peer-deps
安装成功界面：
创建swiper组件
views里放页面组件；mycomponents中放公共组件或者子组件。
在src/mycomponents/films文件夹下创建FilmSwiper.vue组件。
创建后目录如下：
保存时修复
彻底关闭规则检查 no-new
自动控制eslint检查提醒 最后保存时再修复。
在.eslint.js中设置如下：
编写swiper内容
把原来的swiper组件 按照单文件组件创建 组件写入
但是需要修改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>
二级的声明式导航
</div>
<router-view></router-view>
</div>
</template>
<script>
import filmSwiper from '@/mycomponents/films/FilmSwiper'
export default {
components: {
filmSwiper
}
}
</script>Swiper子组件
创建Swiper列表组件
修改filmsView.vue页面中列表内容封装为组件。
也就是以下圈着的部分，把这块封装为组件：
在mycomponents/films下创建FilmSwiperItem.vue。
内容如下：
<template>
<div class="swiper-slide">
<slot></slot>
</div>
</template>使用子组件
导入到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>
二级的声明式导航
</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>增加生命周期
改为从生命周期中加载列表数据，然后渲染列表。
设置data和生命周期mounted函数。
示例如下：
<template>
<div>
<!-- 增加判断 数据加载完成后渲染 -->
<film-swiper :key="datalist.length">
<film-swiper-item v-for="data in datalist" :key="data">{{data}}</film-swiper-item>
</film-swiper>
<div>
二级的声明式导航
</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 () {
// 模拟获取后端数据
setTimeout(() => {
this.datalist = ['11111111', '22222222', '33333333']
}, 1000)
},
components: {
filmSwiper,
filmSwiperItem
}
}
</script>增加图片显示
整理banner数据到banner.json文件中，放入到public下：
加载数据
在生命周期mounted函数中，修改为使用axios请求本地banner.json文件中的数据。
并赋值到datalist中。
示例如下：
export default {
data () {
return {
datalist: []
}
},
mounted () {
// 模拟获取后端数据
// setTimeout(() => {
// this.datalist = ['11111111', '22222222', '33333333']
// }, 1000)
axios.get('/banner.json').then(res => {
console.log(res.data.data)
this.datalist = res.data.data
})
},渲染修改
渲染列表时修改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>图片链接处理
图片链接使用的是相对路径，通过过滤器对图片链接进行拼接域名，
示例如下：
import Vue from 'vue'
// 使用过滤器 处理图片链接
Vue.filter('getImg', (path) => {
return 'https://www.matiji.net' + path
})图片样式设置
在图片的父级上增加类设置并对图片进行响应式样式设置。
设置类
设置样式
<style lang="scss" scoped>
.filmSwiperItem {
img {
width: 100%;
}
}
</style>总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue Swiper组件实现笔记
到此这篇关于Vue Swiper组件的文章就介绍到这了,更多相关Vue Swiper组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！