vue中使用swiper插件遇到的问题

最新推荐文章于 2024-11-19 18:55:05 发布

原创最新推荐文章于 2024-11-19 18:55:05 发布 · 975 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swiper #vue

vue 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍如何在项目中安装并使用Swiper组件，包括通过npm安装、导入组件、创建实例及结合异步数据加载的最佳实践。文章推荐使用async/await与$nextTick确保Swiper在数据加载完成后初始化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//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，简单