微信小程序调用swiper轮播组件元素不显示问题记录-小程序swiper轮播-swiper小程序-即速应用

微信小程序调用swiper轮播组件元素不显示问题记录-小程序swiper轮播-swiper小程序

浏览量：1861 时间：2020-04-06 来源：Xx丶浅时光

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