项目需要用到swiper
类似这种结构
在用swiper和slide标签组件的时候没有问题
就是没有左右切换和分页器,就是引入模块的问题
在swiper给出的vue代码模板中引入了
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "./style.css";
在我的nuxt项目中复制上述代码,报错:找不到模块
解决方法:
对于左右切换的按钮,自己写样式如下
<div
class="swiper-pagination absolute w-100px bottom-10% flex justify-around align-center"
>
<span
class="iconfont icon-arrow-left-filling"
:class="disableLeft ? 'icon-arrow-left-filling-disable' : ''"
@click="turnLeft"
//点击左边就触发turnLeft函数
></span
>{{ kvIndex + 1 }}/{{ list.length }}
<span
class="iconfont icon-arrow-right-filling"
:class="disable ? 'icon-arrow-right-filling-disable' : ''"
@click="turnRight"
></span>
</div>
turnLeft函数:
turnLeft() {
const swiper = this.$refs.swiper.$swiper;
console.log("swiper", swiper);
swiper.slidePrev();
if (this.kvIndex == 0) {
this.disableLeft = true;
this.disable = false;
}
},
其实就是调用了swiper的slidePrev方法。
=======================================================
还可以拿到当前页面是第几页:
ref绑定的是swiper标签
slideChange() {
this.kvIndex = this.$refs.swiper.$swiper.realIndex;
console.log("this.kvIndex", this.kvIndex);
},
跳转到指定的页面
selectIndicator(index) {
this.kvIndex = index;
this.$refs.swiper.$swiper.slideTo(index);
},