Vue初应用之利用swiper制作简单的轮播图

最新推荐文章于 2024-10-12 15:37:03 发布

Mr_Tianci

最新推荐文章于 2024-10-12 15:37:03 发布

阅读量450

点赞数 2

分类专栏：协作文章标签： banner

本文链接：https://blog.csdn.net/Mr_Tianci/article/details/85004881

版权

协作专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、https://www.swiper.com.cn/

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./swiper.min.css">
</head>
<style> 
    .swiper-container {
    width: 600px;
    height: 300px;
}  
</style>
<body>
    <div id="app">
        <Banner></Banner>
        <hr>
        <Banner></Banner>
    

    </div>
    <template id="banner">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in list">
                <img :src="item" alt=""> 

            </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>
</template>
    <script src="./swiper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
        //   direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        }) 
        new Vue({
            el:"#app",
            components:{
                Banner:{
                    template:"#banner",
                    data(){
                        return{
                            list:[]
                        }
                    },
                    methods: {
                        bannerInit(){
                          setTimeout(()=>{
                              this.list=['http://i6.hexunimg.cn/2014-12-26/171789445.jpg',
                            'https://goss1.vcg.com/creative/vcg/800/version23/VCG41128560498.jpg',
                            'https://goss1.vcg.com/creative/vcg/800/version23/VCG4185886734.jpg']
                            var mySwiper = new Swiper('.swiper-container',{
                                loop:true,
                            })
                          },1000);
                        }
                    },
                    mounted(){
                        this.bannerInit()
                    }
                }
            }
        })     
        </script>
</body>
</html>

修改之后的banner

<!DOCTYPE html>
<html>
<head>
   
    <link rel="stylesheet" href="./swiper.css">
    <style>
    	.test{
    		width: 100px;
    		height: 100px;
    		border: 1px solid red;
    	}
    </style>
</head>
<body>

<div id="app">
	<Banner></Banner>

</div>

<template id='banner'>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for='item in list'>
        	<img :src="item">
        </div>
        
    </div>
    {{name}}
    <input type="text" v-model='name'>
</div>
</template>
    <script src="./swiper.js"></script>
    <script src='../base/vue.js'></script>
    <script>  

    new Vue({
    	el:"#app",
    	components:{
    		Banner:{
    			template:'#banner',
    			data(){
    				return{
    					list:[],
                        name:'你好'
    				}
    			},
                methods:{
                    bannerInit() {
                        setTimeout(()=>{
                            console.log(111)
                           this.list=['http://i6.hexunimg.cn/2014-12-26/171789445.jpg',
                        'https://goss1.vcg.com/creative/vcg/800/version23/VCG41128560498.jpg',
                        'https://goss1.vcg.com/creative/vcg/800/version23/VCG4185886734.jpg']
                        // 当上一次数据修改完成（界面修改也完成）之后才会调用回调函数里的方法
                        Vue.nextTick(()=>{
                           var mySwiper = new Swiper ('.swiper-container', {
                            loop: true,  
                          })  
                        });
                           
                        }, 1000);
                    }
                },
    			mounted(){
    				this.bannerInit() 
                    delete mySwiper=null
                     
    			},

                updated(){
                    // console.log(1111)
                    // if (state==false) {
                    //     state=true
                    //    var mySwiper = new Swiper ('.swiper-container', {
                    //     loop: true,  
                    //   })  
                    // }
                    
                }
    		}
    	}
    })      

  </script>
</body>
</html>

遇到的问题
//在执行了bannerinit初始化之后，无报错，但是轮播图无法轮播，原因是因为settimeout下的this指向有问题，解决办法是要么换用箭头函数，要么在外面申明let that = this。然后在里面用that
// swiper实例化的时候 slider 元素还没有创建踹所有实例化有问题导致不能滚动
// 在slider 创建完成之后实例化能否解决问题？
// 在mounted实例化失败
// 在update实例化半成功多次实例化 update 多次执行
//.通过状态值控制实例化的执行可以解决但是不方便
// nextTick