Vue中Swiper的初始化

最新推荐文章于 2022-11-28 17:22:20 发布

xinga1016

最新推荐文章于 2022-11-28 17:22:20 发布

阅读量1.5k

点赞数 1

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_45226867/article/details/109602618

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、引入插件

 <script src="vue.js"></script>
  <link rel="stylesheet" href="swiper.css">
  <script src="swiper.js"></script>

2、初始化
推荐一：组件初始化

注意在mounted里初始化时，初始化会出现过早情况，达不到功能；
可在updated生命周期中初始化，但是每次更新都将会初始化一次，只是暂时解决；
我们可自行封装一个轮播图组件，让后再给组件一个key值,当key值改变，组件会重新挂载触发mounted；

Vue.Component("Swiper", {
    template: `
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <slot></slot>
            </div>
            <!--如果需要分页器-->
            <div class="swiper-pagination"></div>
        </div>
    `,
    mounted(){
           new Swiper('.swiper-container',{
            loop:true,
            pagination:{
                el:".swiper-pagination"
            }
           })
       }
})
new Vue({
    el: "#box",
    data: {
        datalist: [],
        
    },
    mounted() {
        setTimeout((= {
            this.datalist=["1",'2','3']
        }),2000)
    }
})

HTML：

<body>
    <div id="app">
        <Swiper :key="datalist.length">
            <div class="swiper-slide" v-for="data in datalist">
                {{data}}
            </div>
        </Swiper>
    </div>
    <!-- 下面代码不会生效 它不在 vue的管控范围内 -->
    <!-- <h1>{{msg}}</h1> -->
</body>

推荐二：指令初始化

只要判断数据加载完毕后触发自定义指令初始化swiper

<div class="swiper-container">
     <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(data,index) in datalist" v-swipe="{
             index:index,
             length:datalist.length
         }">
             {{data}}
         </div>
      </div>
 </div>

js:

Vue.directive("swipe",{
      inserted(el,bind){
          if(bind.value.index===bind.value.length-1){
              new Swiper(".swiper-container",{
                  loop:true,
                  pagination:{
                      el:".swiper-pagination"
                  }
              })
          }
      }
  })

xinga1016

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中Swiper的初始化

1、引入插件 <script src="vue.js"></script> <link rel="stylesheet" href="swiper.css"> <script src="swiper.js"></script>2、初始化注意在mounted里初始化时，初始化会出现过早情况，达不到功能；可在updated生命周期中初始化，但是每次更新都将会初始化一次，只是暂时解决；我们可自行封装一个轮播图组件，让后再给组件一个k
复制链接

扫一扫