vue和superslide使用，轮播失效问题

最近在仿做一个网站，有几个轮播图是基于superslide实现的，纯HTML是没问题，但是使用vue就发现轮播图全部失效，无法轮播。

最后看了一段代码，得到启发:

 1 $(document).ready(function(e) {
 2     $(".banner").slide({
 3         mainCell:".bd ul",
 4         titCell:'.hd ul',
 5         autoPlay:true,
 6         autoPage:true,
 7         effect:"topLoop",
 8         easing:"easeOutCirc"
 9     });
10 });

在页面加载完成后再调用superslide相关函数

想到vue组件的生命周期，与$(document).ready相符合的是mounted方法

在组件中添加mounted方法，里面调用superslide相关函数

mounted:function () {
    $(".banner").slide({
        mainCell:".bd ul",
        titCell:'.hd ul',
        autoPlay:true,
        autoPage:true,
        effect:"topLoop",
        easing:"easeOutCirc"
    });    
}

轮播生效，问题解决，放在created方法里是不行的

posted @ 2020-07-18 15:33  代码小伙  阅读(1081)  评论(0)  编辑  收藏  举报