Vue-swiper组件封装

最新推荐文章于 2025-04-15 11:12:13 发布

李李·.

最新推荐文章于 2025-04-15 11:12:13 发布

阅读量562

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/qq_51201589/article/details/116558819

版权

前端专栏收录该内容

11 篇文章

订阅专栏

一. swiper学习
https://www.swiper.com.cn/

      可以观看以上教程
二. 自定义组件的封装
      自定义封装swiper组件（基于swiper）
      注意：防止swipe初始化过早(利用key值和Vue的生命周期)

1.引入文件

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

2.写swiper

 new Swiper ('.a',{
          // direction: 'vertical'
          loop:true,
          // 如果需要分页器
          pagination: {
               el: '.swiper-pagination',
          }
 })

3.在vue中使用

div id="box">
        <div class="swiper-container a">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for='data in datalist'>
                    {{data}}  <!-- 动态 -->
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
           <!--  <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
             -->
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                datalist:[]
            },
            mounted() {
                setTimeout(()=>{
                    //异步请求回来的
                    this.datalist = ['111','222','333']

                  
                    //swiper初始化过早
                },2000)
            },

            updated() {

                new Swiper ('.a',{
                        // direction: 'vertical'
                        loop:true,
                            // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        }
                })

            },
        })
    </script>

这里需要考虑初始化的swiper需要放在哪里，如果放在mounted生命周期的setTimeout中，就会出现生命周期过早的BUG，所以考虑将初始化的值放在updated生命周期内，Vue渲染dom完毕后才开始初始化。

4.封装组件

因为组件是可能需要到处使用的，所以考虑封装组件，并且，组件可以轮播任何一种东西，比如:图片，文字，等等，所以考虑使用插槽，具体代码如下，有几点需要格外注意

<body>
    <div id="box">
        <swiper  :key='datalist.length'>
            <img   class="swiper-slide" v-for='data in datalist' :src="data" alt="">
        </swiper>
    </div>
    <script>

        //封装一个组件进行轮播
        Vue.component('swiper',{
            //插槽技术
            template:`
            <div class="swiper-container a">
                <div class="swiper-wrapper">
                        <slot>
                        </slot>   
                </div>
            <!-- 如果需要分页器 -->
                <div class="swiper-pagination">
                
                </div>
            </div>
            `,
            mounted() {
            new Swiper ('.a',{
                // direction: 'vertical'
                loop:true,
                    // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                }
            })
            },
        })
        new Vue({
            el:"#box",
            data:{
                datalist:[],
            },
            mounted(){
                //处理异步操作
                setTimeout(()=>{
                    this.datalist = ['./img/11.jpg','./img/12.jpg','./img/15.jpg']
                    //异步更新时才直接改key值
                },2000)
            },
        })
    </script>
</body>

首先第一个就是key值得设置，因为diff算法的比较规则比较特殊，Vue存在着复用的操作，它会逐一比较，key值不一样才会“干掉”，不然会直接复用，所以考虑把key值动态设置成数组的长度，不设置也行，但是需要保证key在mounted中进行了变化，下面这种操作也是可以的。

 new Vue({
            el:"#box",
            data:{
                datalist:[],
                key:0
            },
            mounted(){
                //处理异步操作
                setTimeout(()=>{
                    this.datalist = ['./img/11.jpg','./img/12.jpg','./img/15.jpg']
                    //异步更新时才直接改key值
                    key=1
                },2000)
            },
        })

第二个注意点就是，swiper初始化到底放在哪里，还是父组件的updated中吗？很显然不应该，因为我已经把它封装成组件了，所以不应该还需要依赖父组件，不然以后别人使用这个组件，还需要考虑你父组件中的内容？

那应该在哪里初始化，我们考虑在子组件的mounted生命周期内进行初始化，这样不会出现初始化过早的问题，它会等到父组件Vue渲染完dom后才进行初始化。

下面是演示图