目录
前言
使用方法
效果图
1.下载swiper
2. 写入需要的页面
3.在对应页面引入组件
4.推荐页完整代码
前言
Vue3和Vue2在使用swiper时是有差别的，Vue3引入swiper需要注意Vu3的版本和swiper的版本，如果不匹配通常会报错
如下：当引用版本过高的swiper时报错（版本不相符）
解决方案是：引用版本较低的swiper
使用方法
效果图
1.下载swiper
2. 写入需要的页面
<div class="swiper">
<swiper :modules="modules" :navigation="false" :loop="true" :pagination="{ clickable: true }">
<!-- modules为导入的模块，绑定导入的模块导航模块和分页模块，loop实现轮播图循环模式 -->
<swiper-slide>
<img src="../assets/2.jpeg">
</swiper-slide>
<swiper-slide>
<img src="../assets/3.jpeg">
</swiper-slide>
<swiper-slide>
<img src="../assets/4k3.jpg">
</swiper-slide>
</swiper>
</div>3.在对应页面引入组件
//引入组件
import { Swiper, SwiperSlide } from 'swiper/vue';
//引入模块
import { Pagination,Navigation } from 'swiper/modules';
//引入样式,
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css';
export default {
name: '1130127Recommend',
components: {
Swiper,
SwiperSlide,
},
data() {
return {
modules: [Navigation, Pagination]
};
},4.推荐页完整代码
<template>
<div class="swiper">
<swiper :modules="modules" :navigation="false" :loop="true" :pagination="{ clickable: true }">
<!-- modules为导入的模块，绑定导入的模块导航模块和分页模块，loop实现轮播图循环模式 -->
<swiper-slide>
<img src="../assets/2.jpeg">
</swiper-slide>
<swiper-slide>
<img src="../assets/3.jpeg">
</swiper-slide>
<swiper-slide>
<img src="../assets/4k3.jpg">
</swiper-slide>
</swiper>
</div>
<div class="wp">
<h2>热播连载</h2>
<ul class="list">
<li>
<img src="../assets/2.jpeg" alt="">
<h3>三国演义</h3>
<p>阿阿斯顿哈萨克老大大</p>
</li>
<li>
<img src="../assets/3.jpeg" alt="">
<h3>水浒传</h3>
<p>士别三日当刮目相待</p>
</li>
<li>
<img src="../assets/4k3.jpg" alt="">
<h3>西游记</h3>
<p>妖怪哪里跑</p>
</li><li>
<img src="../assets/wallhaven-859vdk_1920x1080.png" alt="">
<h3>红楼梦</h3>
<p>红楼梦</p>
</li>
</ul>
</div>
</template>
<script>
//引入组件
import { Swiper, SwiperSlide } from 'swiper/vue';
//引入模块
import { Pagination,Navigation } from 'swiper/modules';
//引入样式,
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css';
export default {
name: '1130127Recommend',
components: {
Swiper,
SwiperSlide,
},
data() {
return {
modules: [Navigation, Pagination]
};
},
mounted() {
},
methods: {
},
modules:{
}
};
</script>
<style lang="scss" scoped>
* {
margin: 0;padding: 0;
}
.swiper {
width: 75rem;
height: 34.4rem;
img{
width: 100%;
height: 100%;
}
}
.wp {
width: 100%;
background-color: #f6f6f6;
margin:0 auto ;
h2 {
width: 71rem;
height: 8.6rem;
margin: 0 2rem;
line-height: 8.6rem;
font-size: 3.4rem;
font-weight: normal;
}
.list {
width: 71rem;
margin: 0 auto ;
background-color: #fff;
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li {
width: 34.8rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
img {
width: 34.8rem;
height: 26.2rem;
margin-bottom: 1.5rem;
}
h3 {
width: 34.8rem;
height: 2.8rem;
line-height: 2.8rem;
margin-bottom: 1.2rem;
font-size: 2.8rem;
color: #2D2D2D;
}
p {
width: 34.8rem;
height: 2.4rem;
line-height: 2.4rem;
font-size: 2.4rem;
margin-bottom: 2.8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
</style>
