swiper组件
场景复现:我有一个列表数组,使用current-item-id来定位当前元素,每次移动到列表头部或者尾部动态切分列表,重新渲染swiper,我发现在截取数组重新渲染的时候 会出现如下错误:
webviewScriptError
Cannot read property '$$' of undefined
TypeError: Cannot read property '$$' of undefined
at HTMLElement._attached.wx.getPlatform._touchstartHandlerForDevtools
感觉是不是current-item-id的定位出现了问题,但是我的渲染数组实实在在是有item-id的元素的。
哪些有经验的大佬可以帮忙看看,感谢!
代码如下:
<swiper :current-item-id="'index_'+ currentIndex" style="height: 100%;" @change="changeSubject" v-if="subjectList.length > 0">
<swiper-item v-for="(item,index) in subjectList" :item-id="'index_'+item.index" :key="item.index">
<view class="d-flex">
<view class="title">
{{item.title}}
</view>
</view>
</swiper-item>
</swiper>
getSubjectList(){
if(this.startIndex<this.currentIndex && this.currentIndex<this.endIndex){
return;
}
//到达最后了数组扩容一下
if(this.currentIndex == this.endIndex){
this.startIndex = Math.max(this.currentIndex - 2,0);
this.endIndex = Math.min(this.endIndex + this.step,this.todayTask.subjects.length - 1)
}
if(this.currentIndex == this.startIndex){
this.startIndex = Math.max(this.startIndex - this.step,0)
this.endIndex = Math.min(this.currentIndex + this.step,this.todayTask.subjects.length - 1)
}
this.subjectList = [];
this.subjectList = this.todayTask.subjects.slice(this.startIndex,this.endIndex + 1)
console.log(this.subjectList)
},
changeSubject(e){
this.currentIndex = e.detail.currentItemId.replace('index_','') - 0
console.log(this.currentIndex)
this.getSubjectList()
},
我也遇到这个问题,不知道怎么回事,博主你的问题解决了吗?下面的评论我也没看懂
你的功能我好像明白,但你的写法我不懂,感觉过于复杂,直接使用@change事件即可;代码如下