挖个洞埋情人 2022-04-18 01:19 采纳率: 71.4%
浏览 62
已结题

swiper这个报错是个啥意思啊!

Uncaught TypeError: Cannot read property 'on' of undefined at

navSwiper.$el.on('touchstart', function(e) {
        e.preventDefault() //去掉按压阴影
    })  

源码是这样的 该怎么解决啊

全部Js源码

barwidth = 36 //导航粉色条的长度px
          tSpeed = 300 //切换速度300ms
        var navSwiper = new Swiper('.ItemNav', {
            slidesPerView: 6,
            freeMode: true,
            on: {
                init: function() {
                    navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致
                    bar = this.$el.find('.bar')
                    bar.css('width', navSlideWidth)
                    bar.transition(tSpeed)
                    navSum = this.slides[this.slides.length - 1].offsetLeft //最后一个slide的位置

                    clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度
                    navWidth = 0
                    for (i = 0; i < this.slides.length; i++) {
                        navWidth += parseInt(this.slides.eq(i).css('width'))
                    }

                    topBar = this.$el.parents('body').find('.ItemTop') //页头

                },

            },
        });

        var pageSwiper = new Swiper('.ItemNavnav', {
            watchSlidesProgress: true,
            resistanceRatio: 0,
            on: {
                touchMove: function() {
                    progress = this.progress
                    bar.transition(0)
                    bar.transform('translateX(' + navSum * progress + 'px)')
                    //粉色255,72,145灰色51,51,51
                    for (i = 0; i < this.slides.length; i++) {
                        slideProgress = this.slides[i].progress
                        if (Math.abs(slideProgress) < 1) {
                            r = Math.floor((255 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                            g = Math.floor((72 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                            b = Math.floor((145 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                            navSwiper.slides.eq(i).find('span').css('color', 'rgba(' + r + ',' + g + ',' + b + ',1)')
                        }
                    }
                },
                transitionStart: function() {
                    activeIndex = this.activeIndex
                    activeSlidePosition = navSwiper.slides[activeIndex].offsetLeft
                    //释放时导航粉色条移动过渡
                    bar.transition(tSpeed)
                    bar.transform('translateX(' + activeSlidePosition + 'px)')
                    //释放时文字变色过渡
                    navSwiper.slides.eq(activeIndex).find('span').transition(tSpeed)
                    navSwiper.slides.eq(activeIndex).find('span').css('color', 'rgba(255,72,145,1)')
                    if (activeIndex > 0) {
                        navSwiper.slides.eq(activeIndex - 1).find('span').transition(tSpeed)
                        navSwiper.slides.eq(activeIndex - 1).find('span').css('color', 'rgba(51,51,51,1)')
                    }
                    if (activeIndex < this.slides.length) {
                        navSwiper.slides.eq(activeIndex + 1).find('span').transition(tSpeed)
                        navSwiper.slides.eq(activeIndex + 1).find('span').css('color', 'rgba(51,51,51,1)')
                    }
                    //导航居中
                    navActiveSlideLeft = navSwiper.slides[activeIndex].offsetLeft //activeSlide距左边的距离

                    navSwiper.setTransition(tSpeed)
                    if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {
                        navSwiper.setTranslate(0)
                    } else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {
                        navSwiper.setTranslate(clientWidth - navWidth)
                    } else {
                        navSwiper.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft)
                    }
                },
            }
        });
    navSwiper.$el.on('touchstart', function(e) {
        e.preventDefault() //去掉按压阴影
    })
    navSwiper.on('tap', function(e) {

        clickIndex = this.clickedIndex
        clickSlide = this.slides.eq(clickIndex)
        pageSwiper.slideTo(clickIndex, 0);
        this.slides.find('span').css('color', 'rgba(51,51,51,1)');
        clickSlide.find('span').css('color', 'rgba(255,72,145,1)');
    })
    
    //热卖        
    var bannerSwiper = new Swiper('.banner', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
            renderFraction: function(currentClass, totalClass) {
                return '<span class="' + currentClass + '"></span>' + '/' + '<span class="' + totalClass + '"></span>';
            },
        },
    });

下面是html

<article>
            <div class="tgj_IndexItemBox">
                <div class="tgj_IndexItem">
                    <div class="tgj_ItemNav">
                        <div class="tgj_ItemNavTitle"><i></i></div>
                        <div class="tgj_ItemNavScrool">
                            <div class="ItemTop">
                                <div class="swiper-container overflow-hidden ItemNav">
                                  <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                      <span style="color:rgba(255,72,145,1);">热卖</span></div>
                                    <div class="swiper-slide">
                                      <span>水果</span></div>
                                    <div class="swiper-slide">
                                      <span>乳品</span></div>
                                    <div class="swiper-slide">
                                      <span>零食</span></div>
                                    <div class="swiper-slide">
                                      <span>肉蛋</span></div>
                                    <div class="swiper-slide">
                                      <span>蔬菜</span></div>
                                    <div class="swiper-slide">
                                      <span>酒饮</span></div>
                                    <div class="swiper-slide">
                                      <span>速食</span></div>
                                    <div class="swiper-slide">
                                      <span>熟食</span></div>
                                    <div class="swiper-slide">
                                      <span>水产</span></div>
                                    <div class="swiper-slide">
                                      <span>粮油</span></div>
                                    <div class="swiper-slide">
                                      <span>轻食</span></div>
                                    <div class="swiper-slide">
                                      <span>火锅</span></div>
                                    <div class="swiper-slide">
                                      <span>日百</span></div>
                                    <div class="bar">
                                      <div class="color"></div>
                                    </div>
                                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <div class="overflow-hidden">
                            <div class="swiper-container ItemNavnav">
                                <div class="swiper-wrapper">
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">
                                          slide1
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">
                                          slide2
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide3</div></div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide4</div></div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide5</div></div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide6</div></div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide7</div></div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide8</div></div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide9</div></div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide10</div></div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide11</div></div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide12</div></div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide13</div></div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide slidepage">
                                    <div class="swiper-container scroll">
                                      <div class="swiper-wrapper">
                                        <div class="swiper-slide slidescroll">slide14</div></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>

我想让html能够在一张页面中可以重复使用,现在用一个可以,但是用两个就报错。

展开全部

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-04-18 06:48
    关注

    navSwiper.$el 没有 on这个属性 。
    你用法有问题吧 $el 应该是个 变量吧 navSwiper[$el].on

    你先打印 navSwiper和$el 看看 有没有值 。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 4月29日
  • 已采纳回答 4月22日
  • 修改了问题 4月19日
  • 创建了问题 4月18日

悬赏问题

  • ¥15 centos7.6进不去系统,卡在数字7界面
  • ¥15 Tensorflow采用interpreter.allocate_tensors()分配内存出现ValueError: vector too long报错
  • ¥15 使用CGenFF在线生成血红素辅基拓扑结构遇到问题
  • ¥15 在fragment使用okhttp同步上传文件,能不能在fragment销毁后还可以继续上传文件?
  • ¥20 matlab代码实现可达矩阵形成骨骼矩阵
  • ¥15 关于地板的木纹和图库中的匹配的
  • ¥30 机器学习预测疾病模型流程疑问
  • ¥50 2048Python实现
  • ¥15 使用ads进行低噪放仿真没有结果且不报错
  • ¥15 关于#python#的问题:有偿求一个千寻框架找书机器人插件