//1. 安装swiper
npm i swiper
//2.引用
import Swiper from "swiper";
//下面用不了就用这个 import "swiper/dist/css/swiper.css"; 可以去node_modules--->swiper文件夹里找一下swiper.css的路径
import "swiper/css/swiper.css";
//3.创建swiper实例
**-----1.由于swiper组件必须在界面加载完毕后在才能使用,所以实例应该放在mounted函数里
**-----2.由于getItems函数是异步请求数据,所以要处理swiper实例在数据请求成功后创建,
使用 this.$nextTick([callback]),nextTick即页面加载完之后执行回调函数,方法有3个:
**-----2.1直接利用async和await
async mounted() {
await this.$store.dispatch("getItems");
this.$nextTick(() => {
var mySwiper = new Swiper(".swiper-container", {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination"
}
});
});
}
**-----2.2在getItems函数中传一个参数cb,函数最后添加一句代码typeof cb==='function' &&cb()
在dispatch getItems的时候传递回调函数
async getItems({ commit },cb) {
const result = await reqItems()
if (result.code === 0) {
const items = result.data
commit(RECEIVE_ITEMS, items)
typeof cb==='function' &&cb()
}
},
mounted() {
this.$store.dispatch("getItems", () => {
this.$nextTick(() => {
var mySwiper = new Swiper(".swiper-container", {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination"
}
});
});
});
}
**-----2.3在watch中监视执行
watch: {
items() {
this.nextTick(() => {
var mySwiper = new Swiper(".swiper-container", {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination"
}
});
});
}
}
//推荐使用2中的3个方法的第一个2.1,简单
vue中使用swiper插件遇到的问题
最新推荐文章于 2024-11-19 18:55:05 发布