VUE ---swiper轮播图

最新推荐文章于 2024-10-24 14:34:56 发布

Lion Of WU

最新推荐文章于 2024-10-24 14:34:56 发布

阅读量279

点赞数

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/NDSoumig/article/details/106152993

版权

vue.js 专栏收录该内容

14 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="lib/swiper/css/swiper.css">
<script src="lib/swiper/js/swiper.js"></script>
<script src="../vue.js"></script>
<style>
    .swiper-container {
        width: 600px;
        height: 300px;
    }  
  </style>
<body>
    <div id="box">
        <div class="swiper-container a">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(data,index) in list" v-swiper="{index:index,length:list.length}">
                    {{data}}
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        
    </div>
   
</body>
<script>
    Vue.directive("swiper",{
        inserted(el,bind){
            console.log(bind.value.index)
            console.log(bind.value.length-1)
            if(bind.value.index === bind.value.length-1){
                new Swiper ('.a',{
                // direction: 'vertical'
                loop:true,
                    // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                }
                })
            }
        }
    })

    new Vue({
        el:"#box",
        data:{
          list:[]
        },
        mounted() {
          setTimeout(()=>{
            this.list= ["1111","2222","3333"]
          },2000)
        },

      })
     
</script>
</html>

在这里插入图片描述