Angular使用Swiper插件内置方法报错的问题

发布于 2022-09-07 15:52:37 字数 2316 浏览 13 评论 0

<div class="navTab swiper-container" id="nav">
            <ul class="nav-ul swiper-wrapper">
                <li class="nav-item swiper-slide">热卖热卖</li>
                <li class="nav-item swiper-slide">水果水果</li>
                <li class="nav-item swiper-slide">蔬菜蔬菜</li>
                <li class="nav-item swiper-slide">乳品乳品</li>
                <li class="nav-item swiper-slide">水产水产</li>
                <li class="nav-item swiper-slide">粮油粮油</li>
            </ul>
        </div>
import { Component, OnInit } from "@angular/core";

declare var $: any;
declare var Swiper: any;

@Component({
    selector: 'navTab',
    templateUrl: './navTab.component.html',
    styleUrls: ['./navTab.component.css']
})
export class navTabComponent implements OnInit {
    constructor() {

    }
    ngOnInit() {
        $('.nav-ul>.nav-item').click(function() {
            var Index = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
        });
        var mySwiper = new Swiper('#nav', {
            freeMode: true,
            freeModeMomentumRatio: 0.5,
            slidesPerView: 'auto',
        });
//        swiperWidth = mySwiper.container[0].clientWidth;
//        maxTranslate = mySwiper.maxTranslate();
//        maxWidth = -maxTranslate + swiperWidth / 2
//        mySwiper.on('tap', function(swiper, e) {
//            slide = swiper.slides[swiper.clickedIndex];
//            slideLeft = slide.offsetLeft;
//            slideWidth = slide.clientWidth;
//            slideCenter = slideLeft + slideWidth / 2;
//            mySwiper.setWrapperTransition(300)
//            if(slideCenter < swiperWidth / 2) {
//                mySwiper.setWrapperTranslate(0);
//            } else if(slideCenter > maxWidth) {
//                mySwiper.setWrapperTranslate(maxTranslate);
//            } else {
//                nowTlanslate = slideCenter - swiperWidth / 2;
//                mySwiper.setWrapperTranslate(-nowTlanslate);
//            }
//        });
    }
}

clipboard.png

我在angular使用Swiper插件内置方法时就会报错,请问各位大神,该如何正确使用

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

随遇而安 2022-09-14 15:52:37

没有用过这个插件,不过你可以参照:https://blog.csdn.net/wgp1573...
我看你的全局变量声明是不是位置不对?
然后就是你有好好的引入吗?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文