美文网首页
swiper轮播图

swiper轮播图

作者: 稻草人_9ac7 | 来源:发表于2019-11-29 15:17 被阅读0次

    第一步下载:swiper库

    npm i swiper
    

    全部的代码如下:

    <template>
        <div id="app">
    
            <!-- swiper轮播图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/a8773912b31bb051ec146159397adab44aede08b.jpg" alt="">
                    </div>
                     <div class="swiper-slide">
                        <img src="https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/a8773912b31bb051ec146159397adab44aede08b.jpg" alt="">
                    </div>
                     <div class="swiper-slide">
                         <img src="https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/a8773912b31bb051ec146159397adab44aede08b.jpg" alt="">
                    </div>
                     <div class="swiper-slide">
                         <img src="https://tpc.googlesyndication.com/simgad/17955358767017347840?sqp=4sqPyQQ7QjkqNxABHQAAtEIgASgBMAk4A0DwkwlYAWBfcAKAAQGIAQGdAQAAgD-oAQGwAYCt4gS4AV_FAS2ynT4&rs=AOga4ql7j96pXG8i7q5C_6pUV4DC4Y2EEg" alt="">
                    </div>
                    
                    
                </div>
            </div>
            
            <div class="test">
                测试主页面
                <chldren1 v-model="msg"></chldren1>
                <p>父组件该的值{{msg}}</p>
                <button @click="fn">父组件该的值</button>
            </div>
              <Navgation></Navgation>
        </div>
    </template>
    <script>
    import Swiper from 'swiper'
    import 'swiper/css/swiper.min.css'
    import chldren1 from './children/index'
    import Navgation from '@/components/Navigation'
    
    
    export default {
          
        data(){
            return{
                msg:1,
              el:'#app',
    
            }
        },
    
        directives:{
            myAdmin:{
                inserted(el){
                    console.log("el:",el)
                }
            }
        },
        mounted(){
        var swiper = new Swiper('.swiper-container',{
        autoplay:true,
        // 解决有数据,但轮播图不动的问题
        // 方法一
        observer:true,
        // 方法二
        // observeParents:true
    
    })
        },
        methods: {
    
            
            fn(){
                this.msg+=1
            }
        },
        components:{
            Navgation,
            chldren1
        }
        
    }
    </script>
    <style lang="less" scoped>
        .test{
            font-size: 16px;
        }
    </style>
    

    相关文章

      网友评论

          本文标题:swiper轮播图

          本文链接:https://www.haomeiwen.com/subject/avlgwctx.html