项目场景:
在 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 调过来的时候存缓存了