今天重新巩固复习项目的时,使用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项目的时候,也没踩到这个坑,所以记录一下,希望能帮到大伙儿!