Swiper踩坑

最新推荐文章于 2024-03-11 10:20:13 发布

chaochao_o

最新推荐文章于 2024-03-11 10:20:13 发布

阅读量616

点赞数

分类专栏：项目实践记录

本文链接：https://blog.csdn.net/lichao000124/article/details/105617656

版权

本文介绍了Swiper的简单使用步骤，包括安装依赖、引入和使用。详细讲述了如何实现网格分布，并在mounted阶段进行初始化。在遇到的问题部分，讨论了初始化时网格间距丢失和滑动按钮失效，以及动态加载时默认显示错误的问题。解决方案涉及了调整初始化时机和修改swiper-wrapper的transform属性，以及在数据加载完成后加载swiper组件。

摘要由CSDN通过智能技术生成

swiper踩坑之路

一、swiper简单使用指南

1、安装swiper依赖包

npm i swiper

2、引入swiper

import Swiper from 'swiper';
import 'swiper/css/swiper.css'

3、使用

//html
<div class="swiper-container">
	<div class="swiper-wrapper">
	 	<div v-for="(item, index) of dataList" key="item.id" class="swiper-slide" :content="item">{
   {
    item }}</div>