如何在javascript中定义'swiper'对象？

Question

我正在尝试在我的 HTML 页面上显示水平时间线。我在网上找到了这个模板，可以在其中滚动时间线。但是，当我尝试打开页面时，我在控制台中收到以下错误“ReferenceError: Swiper not defined”，并且无法滚动时间线。我该如何解决？下面是我的代码。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script>
    const data = [{
            dateLabel: 'January 2017',
            title: 'Gathering Information'
        },
        {
            dateLabel: 'February 2017',
            title: 'Planning'
        },
        {
            dateLabel: 'March 2017',
            title: 'Design'
        },
        {
            dateLabel: 'April 2017',
            title: 'Content Writing and Assembly'
        },
        {
            dateLabel: 'May 2017',
            title: 'Coding'
        },
        {
            dateLabel: 'June 2017',
            title: 'Testing, Review & Launch'
        },
        {
            dateLabel: 'July 2017',
            title: 'Maintenance'
        }
    ];

    new Vue({
        el: '#app',
        data: {
            steps: data,
        },
        mounted() {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 4,
                paginationClickable: true,
                grabCursor: true,
                paginationClickable: true,
                nextButton: '.next-slide',
                prevButton: '.prev-slide',
            });
        }
    })
</script>

Answer 1

这里的错误

"ReferenceError: [在此处插入任何内容] 未定义"

意味着您尝试引用的任何内容尚未定义，并且浏览器引擎无法将其识别为本机对象

Swiper 不是 Chrome 或 Firefox 天生就有的

尝试删除页面顶部的 VueJS CDN 链接，你会得到与 vue 相同的错误，所以....

像使用 Vue 一样包含 Swiper 库

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js" integrity="sha256-4sETKhh3aSyi6NRiA+qunPaTawqSMDQca/xLWu27Hg4=" crossorigin="anonymous"></script>

Here's where Swiper variable is defined如果你好奇