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

内容参考：原文：https://blog.csdn.net/sinat_38426472/article/details/80986985

                 原文：https://www.geek-share.com/detail/2695279087.html

问题描述： 
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");
   }