uniapp之uview swiper组件报错 Error in v-on handler: “TypeError: Cannot read property ‘left‘ of undefined“

项目场景:

在 uniapp 小程序项目中使用 u-swiper 组件来实现根据 A 页面点击的选项来控制进入 B 页面后,swipper 组件默认状态
页面 A 跳转页面B
页面 B 样式如下
在这里插入图片描述
业务需求从 A 页面用户点击未发货,进入页面 B ,此时页面中的样式如上图,滑块的当前位置选中未发货
从 A 页面用户点击退款,进入页面 B ,此时页面中的样式如下图,滑块的当前位置选中退款
在这里插入图片描述
这里直接使用的是 uview1.0 模板当中的组件
在这里插入图片描述
组件代码详见 uview1.0 官网示例代码 /pages/template/order/index


问题描述

在实际项目当中从 A 跳转 B ,携带默认滑块的index值,在 B 页面当中 onload 获取传过来的参数 index ,用这个index 来指定默认的 滑块选中index
跳转后显示的默认位置没有问题 : 从 A(携带 退货 index=3) -> 跳转 B (接收 Index=3,并设置滑块的初始位置为 3:退货) 是可以实现的
但是出现了一个bug ,页面 B 的 swipper 初始状态为 A 页面跳转过来所指定的位置后,此时页面 B 滑动滑块切换到另一个状态 如 : 待发货(如下图操作) 此时页面正常,但是会报错 Error in v-on handler: “TypeError: Cannot read property ‘left‘ of undefined“
在这里插入图片描述


原因分析:

通过报错分析可以了解到是组件报的错,再多的不知道了 TAT
在这里插入图片描述


解决方案:

在查找解决方案的时候看到

在这里插入图片描述
尝试把操作滑块位置的代码放在的 mounted 当中,但是因为index的参数是上一个页面传过来的,需要在 onload 中用 option 接收,在 option 当中接收存到data中,在mounted中再从 data 中拿到存进去的 index,去指定滑块的初始位置

结论

还是不行,而且还尝试过讲数据在onload中存进去,在 onshow ,created ... 各种生命周期中去执行去指定滑块的初始位置 的操作,都不行,只要是通过onload来获取,就算执行执行滑块初始位置的代码不在onload 当中,都还是会报错的

最终解决方案

在 A 页面跳转过来的时候把 index 存到缓存里

			toDeviceListPage(siteId, index) {
				uni.setStorage({
					key: 'idx',
					data: index,
				})
				uni.navigateTo({
					url: `/pages_device/device/list/list?siteId=${siteId}`
				})
			},

在 B 页面中onShow 中再从缓存中取

		onShow() {
			const app = this;
			uni.getStorage({
				key: 'idx',
				success(res) {
					app.init(res.data) // 这是执行指定 swipper 选中状态的函数
				}
			})
		},
猜测

好像是只要经过 onload 来获取 index 就不行,试过 传参用 option.index 取,也试过在 onload 中存缓存,在 onshow 取出来,还是不行,干脆就在页面 A 调过来的时候存缓存了

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值