Question

当我重新访问网页（通过路由器链接）时，我有正确显示幻灯片（用Jquery编写）的问题... 因此，如果我按f5和网页重新加载，一切正常，但是一旦我点击一个链接并且我重定向，一半的网页是空白的...我相信这个问题是因为很多部分这个应用程序是在jquery代码中。我买了一个模板并将其包含在我的Vuejs2项目中

家庭组件的示例

<template>
    <div id="wrapper">
        <HeaderComponent></HeaderComponent>
        <div id="main-content">
            <SlideShow></SlideShow>
        </div>
        <FooterComponent></FooterComponent>
    </div>
</template>

<script>
    import HeaderComponent from './HeaderComponent.vue'
    import SlideShow from './subComponents/SlideShow.vue'
    import FooterComponent from './FooterComponent.vue'

    export default {
        name: 'Home',
        components: {
            'HeaderComponent': HeaderComponent,
            'SlideShow': SlideShow,
            'FooterComponent': FooterComponent
        }
    }
</script>

幻灯片组件

<template>
    <div class="">
        <div class="rev_slider_wrapper">
            <div id="rev_slider" data-slider-layout="fullscreen" data-slider-thumbnail="true" class="rev_slider">
                <ul>
                    <li><img src="static/img/various/bg-image.png"/></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'SlideShow'
    }
</script>

这是index.html中包含的slider.js标签

$(document).ready(function () {
// MAIN VARIABLES INITIALIZATION
    var revapi;

    $(window).resize(function () {
        'use strict';

        if ($('#rev_slider').data('slider-layout') == 'fullscreen' && $('body').hasClass('left-nav')) {
            var windowHeight = $(window).height();
            $('.rev_slider_wrapper, #rev_slider').height(windowHeight);
        }

    });
    (function () {
        'use strict';
        slickCarousel();
        setTimeout(function () {
            revSlider();
            owlCarousel();
        }, 100);
        bxSlider();

        flexslider();
    }());

// REVOLUTION SLIDER
    function revSlider() {
        if ($.fn.revolution && $('#rev_slider').length) {
            var revSliderLayout = $('#rev_slider').data('slider-layout') ? $('#rev_slider').data('slider-layout') : 'auto';
            var revSliderHeight = $('#rev_slider').data('gridheight') ? $('#rev_slider').data('gridheight') : [800, 800, 480, 360];
            var windowHeight = $(window).height();
            if ($('body').hasClass('left-nav')) {
                revSliderLayout = 'auto';
                if ($('#rev_slider').data('slider-layout') == 'fullscreen') {
                    revSliderHeight = windowHeight;
                }
            }
            revapi = $('#rev_slider').show().revolution({
                sliderType: $('#rev_slider').data('slider-type') ? $('#rev_slider').data('slider-type') : 'standard',// standard, hero, carousel
                jsFileLocation: 'static/js/plugins/revolution-slider/revolution/js/',
                sliderLayout: revSliderLayout, // auto, fullscreen, fullwidth
                dottedOverlay: 'none',
                delay: 9000,
                lazyLoad: 'on',
                navigation: {
                    keyboardNavigation: 'on',
                    keyboard_direction: 'horizontal',
                    mouseScrollNavigation: $('#rev_slider').data('nav-mouse') ? $('#rev_slider').data('nav-mouse') : 'off',
                    onHoverStop: 'off',
                    touch: {
                        touchenabled: 'on',
                        swipe_threshold: 75,
                        swipe_min_touches: 1,
                        swipe_direction: 'horizontal',
                        drag_block_vertical: false
                    },
                    arrows: {
                        style: 'zeus',
                        enable: $('#rev_slider').attr('data-nav-arrows') ? false : true,
                        hide_onmobile: false,
                        hide_onleave: false,
                        tmp: $('#rev_slider').data('slider-thumbnail') ? '<div class="tp-title-wrap"><div class="tp-arr-imgholder"></div></div>' : '<div class="tp-title-wrap"></div>',
                        left: {
                            h_align: 'left',
                            v_align: 'center',
                            h_offset: 10,
                            v_offset: 0
                        },
                        right: {
                            h_align: 'right',
                            v_align: 'center',
                            h_offset: 10,
                            v_offset: 0
                        }
                    },
                    bullets: {
                        enable: $('#rev_slider').attr('data-nav-bullets') ? true : false,
                        hide_onmobile: false,
                        style: 'uranus',
                        hide_onleave: false,
                        direction: 'vertical',
                        h_align: $('#rev_slider').data('bullets-align') ? $('#rev_slider').data('bullets-align') : 'left',
                        v_align: 'center',
                        h_offset: 30,
                        v_offset: 0,
                        space: 10,
                        tmp: '<span class="tp-bullet-inner"></span>'
                    }
                },
                carousel: {
                    maxRotation: 5,
                    vary_rotation: "off",
                    minScale: 15,
                    vary_scale: "off",
                    horizontal_align: "center",
                    vertical_align: "center",
                    fadeout: "on",
                    vary_fade: "on",
                    maxVisibleItems: 3,
                    infinity: "off",
                    space: -80,
                    stretch: "off"
                },
                responsiveLevels: $(this).data('responsive') ? $(this).data('responsive') : [1240, 1024, 778, 480],
                gridwidth: $(this).data('gridwidth') ? $(this).data('gridwidth') : [1230, 1024, 767, 480],
                gridheight: revSliderHeight,
                lazyType: 'none',
                parallax: {
                    type: 'mouse',
                    origo: 'slidertop',
                    speed: 2000,
                    levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50],
                    disable_onmobile: 'on'
                },
                shadow: 0,
                spinner: 'off',
                stopLoop: 'on',
                stopAfterLoops: 0,
                // stopAtSlide: $('#rev_slider').data('autoplay') ? 0 : 1,
                shuffle: 'off',
                autoHeight: 'off',
                disableProgressBar: 'on',
                hideThumbsOnMobile: 'off',
                hideSliderAtLimit: 0,
                hideCaptionAtLimit: 0,
                hideAllCaptionAtLilmit: 0,
                startWithSlide: 0,
                fallbacks: {
                    simplifyAll: 'off',
                    nextSlideOnWindowFocus: 'off',
                    disableFocusListener: 'off'
                }
            });
            revapi.bind("revolution.slide.onbeforeswap", function (e) {
                if ($('#rev_slider').data('slider-layout') == 'fullscreen' && $('body').hasClass('left-nav')) {
                    var windowHeight = $(window).height();
                    $('.rev_slider_wrapper, #rev_slider').height(windowHeight);
                }
            });
            revapi.bind('revolution.slide.onchange', function (event, data) {
                var logoImg = $('#logo a img');
                var logoLight = $('#logo a').data('logo-light');
                var logoDark = $('#logo a').data('logo-dark');
                var currentSlide = data.slideIndex;
                if (revapi.find('li').eq(data.slideIndex - 1).attr('data-color') === 'dark') {
                    $('body').addClass('transparent-dark');
                    logoImg.attr('src', logoDark);
                }
                if (revapi.find('li').eq(data.slideIndex - 1).attr('data-color') === 'light') {
                    $('body').removeClass('transparent-dark');
                    logoImg.attr('src', logoLight);
                }
            });
            $('body').on('click', '[data-go-to-slide]', function () {
                var goToSlide = $(this).data('go-to-slide');
                revapi.revshowslide(goToSlide);
                return false;
            });

            setTimeout(function () {
                revapi.revredraw();
            }, 400);
        }
    }
});

因此，如何正确地重新初始化，重新加载，使用此幻灯片执行某些操作，以便在我访问页面时重新呈现。

如果您需要任何其他信息，请告诉我，我会提供。谢谢！

Answer 1

我设法通过在挂载函数中调用Jquery函数来解决它例如：

export default {
        name: 'SlideShow',
        methods: {

        },
        mounted: function () {
            // initial start of slide show
            revSlider();
        }
    }

这是我的外部sliders.js脚本看起来像

的示例

// MAIN VARIABLES INITIALIZATION
    var revapi;

    $(window).resize(function () {
        'use strict';

        if ($('#rev_slider').data('slider-layout') == 'fullscreen' && $('body').hasClass('left-nav')) {
            var windowHeight = $(window).height();
            $('.rev_slider_wrapper, #rev_slider').height(windowHeight);
        }

    });
    (function () {
        'use strict';
        setTimeout(function () {
            revSlider();
        }, 1000);
    }());

    stopAtSlide:1

    // REVOLUTION SLIDER
    function revSlider() {
        if ($.fn.revolution && $('#rev_slider').length) {
            var revSliderLayout = $('#rev_slider').data('slider-layout') ? $('#rev_slider').data('slider-layout') : 'auto';
            ......

幻灯片只是第一次正确显示，然后消失

1 个答案: