[渲染层错误] Uncaught TypeError: Cannot read property ‘$$‘ of undefined

今天重新巩固复习项目的时,使用uswiper组件渲染异常,上一秒得到的图片还好好的,正常滑动,下一秒将标签体内容修改为navigator时,突然页面就不显示了,点击应该内容时报错:

[渲染层错误] Uncaught TypeError: Cannot read property ‘两个美元符号’ of undefined(env: Windows,mp,1.05.2204250; lib: 3.3.5)
渲染层错误] TypeError: Cannot read property ‘$$’ of undefined at HTMLElement._attached.t.IS_DEVTOOLS._touchstartHandlerForDevtools

页面代码如下:

<template>
  <view>
    <view class="swipwerContainer">
      <!-- 给轮播图设置宽高必须设置在swiper上,设置在swiperItem上有奇怪问题 -->
     <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true" class="swiperFath">
      <navigator v-for="(item,index) in swiperList" :key="index" class="swiperItem" :url="`/subpkg/goods_detail/goods_detail?${item.navigator_url.split('?')[1]}`">
          <image :src="item.image_src" ></image>
        </navigator>
      </swiper>
    </view>
  </view>
</template>

错误截图:
在这里插入图片描述
debug时,控制台打印传来的数据也是正常的,瞪了半天没瞪出个结果,问AI,也只是让我处理一下数据没有接收到时undefined的问题,在这里,控制台数据都可以正常打印,显然不是了…

解决方法

后面重新写了个swiper组件,再传相同的数据,显示正常了,效果如下
在这里插入图片描述
页面传参跳转也正常
在这里插入图片描述

原因:在于我将uni-swiper组件中的swip-item标签直接修改成了navigator标签导致

后面重新添加一个swiper-item标签包裹着navigator标签体,然后将v-for重新添加到swiper-item标签中就正常了,这种坑踩得不多,比较难看出来。
修改后的代码如下:

<template>
  <view>
    <view class="swipwerContainer">
      <!-- 给轮播图设置宽高必须设置在swiper上,设置在swiperItem上有奇怪问题 -->
     <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true" class="swiperFath">
       <swiper-item v-for="(item,index) in swiperList" :key="index" class="swiperItem">
         <navigator  :url="`/subpkg/goods_detail/goods_detail?${item.navigator_url.split('?')[1]}`">
             <image :src="item.image_src" ></image>
           </navigator>
       </swiper-item>
      </swiper>
    </view>
  </view>
</template>

网上没看到和我这个相似的博客,第一次写这个uni项目的时候,也没踩到这个坑,所以记录一下,希望能帮到大伙儿!

  • 11
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值