swiper、vant组件的基本使用方式以及$nextTick()的使用

本文链接：https://blog.csdn.net/m0_63851202/article/details/122708477

swiper

swiper是轮播图插件

swiper的安装

npm i swiper@5.4.5 --save

ps：(生产依赖是要放在服务器上的)

swiper官网Swiper演示 - Swiper中文网收录了Swiper的40多个在线示例（swiper demos），Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。https://www.swiper.com.cn/demo/index.html

在需要使用的vue组件中

import Swiper from "swiper"
import "swiper/css/swiper.css"

将需要的swiper轮播代码从官网粘贴过来,注意初始化

当图片不需要发请求时

<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(img,index) in imgs" :key="index" >
                <img v-bind:src="img" />                
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";

export default {
    name:"Banner",
    props:[],
    data(){
        return {
            imgs:["imgs/img1.jpg","imgs/img2.jpg","imgs/img3.jpg"]
        }
    },
    mounted(){
        var mySwiper = new Swiper ('.swiper-container', {           
            loop: true, // 循环模式选项            
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }            
        })        
    }
}
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 2rem;
}

.swiper-container img {
  width: 100%;
  height: 100%;
}
</style>

当图片需要发请求时（注意要使用$nextTick）

<template>
	<div class="swiper-container">
		<div class="swiper-wrapper" id="ttt">
			<div class="swiper-slide" v-for="(img,index) in imgs" :key="index">
				<img v-bind:src="img" />
			</div>
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>
		<!-- 如果需要导航按钮 -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</template>

<script>
	import Swiper from "swiper";
	import "swiper/css/swiper.css";
	import axios from 'axios';

	export default {
		name: "Banner",
		data() {
			return {
				imgs: []
			}
		},
		created() {
			axios.get("http://localhost:3000/bannerImgs")
				.then(res => {
					// 更新数据
					this.imgs = res.data;
					// $nextTick:
					// 当需要操作dom，而且这个dom是由于数据更新（修改）后引起重新渲染的dom，需要使用$nextTick();
					// vue会在dom更新后，调用 $nextTick 回调函数的代码。
					this.$nextTick(() => {
						this.initSwiper();
					});

				})
		},
		methods: {
			initSwiper() {
				//初始化swiper构造函数,操作的是数据更新后的dom,所以需要在dom数据更新完毕并且渲染到dom时初始化，第一个参数是选择器
				var mySwiper = new Swiper('.swiper-container', {
					loop: true, // 循环模式选项            
					// 如果需要分页器
					pagination: {
						el: '.swiper-pagination',
					},

					// 如果需要前进后退按钮
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					}
				})
			}
		}
	}
</script>

<style scoped>
	.swiper-container {
		width: 100%;
		height: 2rem;
	}

	.swiper-container img {
		width: 100%;
		height: 100%;
	}
</style>

总结：

图片不发请求的情况：created时dom还没有渲染，mouted时数据已经渲染到dom上，由于初始化new swiper需要操作dom（根据数据的多少决定有几个分页器）所以要放在monted中

图片需要发请求的情况：如果是后端返回的数据，在created中发送请求，请求是异步代码，不会等待结果，此时如果还在mouted中new swiper，数据还是空，因为发送请求需要耗时间，mouted就先执行了，所以不能在mouted中操作dom，同时如果在请求回调函数中操作dom也不行，因为此时只是数据更新，更新后的数据还未渲染到dom上，操作dom的事情都是vue来完成的，所以不知道是什么时候进行渲染dom，所以我们要使用this.$nextTick(()=>{})

this.$nextTick(( )=>{ }) 的含义是拿到最新的数据时，并且等到数据重新渲染到dom上之后才执行其中的代码，此时数据已经更新并且dom渲染完毕，所以需要在其中进行new swiper操作dom，这也是$nextTick的使用场景，简而言之 $nextTick 就是当需要操作dom，而且这个dom是由于数据更新（修改）后引起重新渲染的dom时使用。

ps：vue处理dom的更新使用了异步更新队列，当vue队列中的dom更新完毕之后则调用$nextTick中的回调函数