内容参考:原文:https://blog.csdn.net/sinat_38426472/article/details/80986985
原文:https://blog.csdn.net/qq_26585943/article/details/54407202
问题描述:
swiper中嵌套多个swiper-item,数量是动态循环生成的。
目前存在的问题是:在页面首次加载时元素正常显示,当点击左侧目录切换页面进行数据重新获取操作时,会改变轮播数据,当再次返回页面时,轮播图的元素不显示,但是审查元素是存在的(图片是链接地址,浏览器能正常下载显示)。然后延迟大概两分钟后又显示了,但数据不到一秒就取到了。
存在原因:
1. 当改变轮播图当前指针,即current属性值时,若该属性没有绑定任何数据,框架会自动绑定当前操作的值;
2. 页面发生切换时,current的值会被存储,也就是记住当前轮播的index。再次返回会重新赋上当前存储的值 ;
3. 也就是说假设滑动到第三屏时,current=2,切换页面改变数据,如果数据只有两条,那么再次返回页面,swiper会查找第三屏的元素,没有找到就会导致元素为空,但是其他屏的数据是存在的,所以页面会显示位置,但是没有元素。
4. 这种情况应该是在轮播图不是自动轮播的情况下出现的。
---------------------
我的问题存在原因:
1.因为左侧目录文件为子页面(调用了z-tree组件),点击目录进行页面跳转后,当前目录页面生命周期未结束,带参数跳转至轮播图页面后,当前页面也开始了/生命周期函数--监听页面加载,数据重新获取操作时,会改变轮播数据,但目录文件页面生命周期未销毁,轮播图的元素就不显示了。
2.从z-tree目录文件传参跳转至轮播图页面时,因为使用的wx.navigateTo(Object object),保留了当前文件,故调用// 生命周期函数--监听页面卸载onUnload: function() {}无效,使用wx.redirectTo(Object object);
详情可参考微信小程序路由组件相关文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.redirectTo.html
解决办法:
1. 为当前轮播图绑定current属性
2. 页面切换返回时,为current重新赋值,current=0;
/**
* 生命周期函数–监听小程序页面显示(每次打开页面都会调用一次)
*/
onShow: function() {
this.setData({
current: 0
})
},
3.在子页面执行wx.redirectTo(Object object);方法后,调用onUnload: function() {}监听页面卸载函数,再执行父页面数据重新获取操作。
// 生命周期函数--监听页面卸载
onUnload: function() {
console.log("onUnload");
}