swiper

swiper

• 作用：实现移动端，pc端的滑动操作
• 是一个第三方库
• swiper官方文档 www.swiper.com.cn
  swiper常用于移动端网站的内容触摸滑动
  Swiper拥有灵活的progress，这是自定义制作3D切换效果的利器
  在Swiper上加些小动画，制作时下组流行的微展示

使用

• 使用Swiper文件
  逻辑：需要一个css文件，需要一个js逻辑文件，cdn直接拿来用
  将js中的XX改掉
  布局复制过来
  可以定义大小，可以把大小复制来
  初始化最好挨着写（第三方库实例化）
  实例化中有配置项，所以可以找api文档来找配置项
• 在vue中应该如何使用

css文件
js文件
布局
<div id="app">
  <Banner></Banner>
</div>
<template id="banner">布局</template>
Vue.component('Banner',{
    template:'#banner',
    data(){
        return:{
            banners:[
                {
                    id:1,
                    text:'slider 1'
                },
                {
                    id:2,
                    text:'slider 2'
                },
                {
                    id:3,
                    text:'slider 3'
                }               
            ]
        }
    }
    mounted(){
        //第三方的实例化必须要有真实的dom
         //静态数据
    （实例化）
    this......
    }
})
new Vue({
    el:'#app'， 
})
<style>
 样式
</style>

• vue中swiper的实现

1. 静态数据的第三方库实例化我们写在mounted中
2. 动态数据的第三方库的实例化我们写在updated中
3. 优化

• 动态数据请求，然后进行第三方库实例化的优化
  理由：将动态数据的第三放库的实例化放到updated中是有弊端的，弊端是第三方库会重复实例化，造成性能浪费（数据不断的更新，updated不断的触发）
  1. 解决：加判断条件。if（this.swiper）return false
  2. 解决：如果有更多的实例化呢？
  • 第二个方案来了
    真实dom全部都存在才可以实例化，意味着我们可以将实例化放到异步队列中解决。
  • eg：放到初始化中去，因为初始化的钩子只触发一次，这里建议放到created中去，因为数据在这里请求哈.
  • 将实例化放到created中，然后放到setTimeout中
  • 但是vue提供了一个他认为是最好的方案（nextTick）
    使用： Vue.nextTick this.$nextTick(组件渲染结束之后这个方法启用)

created(){
    setTimeout(()=>{
        实例化
    },0)
}

created(){
    this.$nextTick(()=>{
        实例化
    })
}