收藏
回答

swiper组件动态渲染出现undenfined?

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()
			},

最后一次编辑于  2020-05-07
回答关注问题邀请回答
收藏

4 个回答

  • 微笑着挥挥手
    微笑着挥挥手
    2020-06-09

    我也遇到这个问题,不知道怎么回事,博主你的问题解决了吗?下面的评论我也没看懂

    2020-06-09
    有用
    回复
  • 🇨🇳 👍
    🇨🇳 👍
    2020-05-07

    你的功能我好像明白,但你的写法我不懂,感觉过于复杂,直接使用@change事件即可;代码如下

    2020-05-07
    有用
    回复 2
    • 鲸落。
      鲸落。
      2020-05-07
      我要实现动态切割数组 每次渲染指定的数组即可,不然一次渲染很多swiper会造成性能问题。
      2020-05-07
      回复
    • 🇨🇳 👍
      🇨🇳 👍
      2020-05-07回复鲸落。
      就是在那两个逻辑代码里修改list就可以啦!切割数组,再赋值给list即可;
      2020-05-07
      回复
  • TNT
    TNT
    发表于小程序端
    2020-05-07
    写个代码片段发下
    2020-05-07
    有用
    回复 2
  • 鲸落。
    鲸落。
    2020-05-07

    2020-05-07
    有用
    回复 4
登录 后发表内容
问题标签