码迷,mamicode.com
首页 > 移动开发 > 详细

swiper移动端全屏播放动态获取数据

时间:2020-02-28 12:26:31      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:wrap   color   style   mamicode   i++   new   ++   nta   jpg   

技术图片

 

 

 

html:

 <link rel="stylesheet" href="css/swiper.min.css">
 
<div class="swiper-container s-c">
        <div class="swiper-wrapper"></div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
</div>
<script src="js/swiper.min.js"></script>
 

 

js:

var vm = new Vue({
    el:‘#app‘,
    data:{
        imgs:[
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
        ],
      
    },
    created: function(){
       
    },
    mounted:function(){
        var self = this;
        var imgs = self.imgs;
        for (var i = 0, len = imgs.length; i < len; i++) {
            var html = ‘<div class="swiper-slide"><img src="‘ + imgs[i].thumb + ‘"/></div>‘
            $(‘.swiper-wrapper‘).append(html)
        }
        var swiper = new Swiper(‘.swiper-container‘, {
            pagination: {
                el: ‘.swiper-pagination‘,
                type: ‘fraction‘,
            },
            loop: true,             //为 true循环
            autoplay: false,      //为 true自动播放到下一张
            init: true,          //为true自动执行,不用调用
            disableOnInteraction: false,
        });

    },
    methods:{
        
    },
    filters:{
        
    }

})

 

swiper移动端全屏播放动态获取数据

标签:wrap   color   style   mamicode   i++   new   ++   nta   jpg   

原文地址:https://www.cnblogs.com/liubingyjui/p/12376223.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!