微信小程序监听data数据变化(类似VUE中的watch)

原文网址： https://github.com/morganfly/morganfly_blog/issues/12

https://blog.csdn.net/xuyangxinlei/article/details/81408200

监听小程序内data的数据告正变化的档灶方法常见的可以求助于现在已有的一些库.

就我所知

wepy (仿VUE开发风格进行小程序开发的一个框架)

watch

都能满足监听小程序data数据变化的功能.

接下来,我简单介绍一下,监听小程袜蠢悔序页面data变化的原理

iOS数据监听很简单，比如登录成功之后首页、个人中心页等很多页面都需要更新数据，只需要首页和个人中心页注册通知，登录成功册答之后发送通知，首页和个人中心页就能接收到该通知，此时就可以更新数据及界面，退出桐大登录同理。

小程序更新页面数据就比较费劲，之前我都是州轮慧获取上级页面，然后调用上级页面自定义方法 loadNewData 方法来刷新上级页面数据。

这种方法说实话也挺好用的，但是只能更新 wx.navigateTo 打开的页面。

官方也有页面间通信方法 EventChannel ，同样只能和 wx.navigateTo 打开的页面进行通信。

今天遇到的需求是 tabbar 切换的页面更新首页列表数据，只能各种百度，最终也实现的功能。

在首页调用

在其他页面修改 reloadIndex 的值

小程序组件有 数据监听器 ，也实现了某个功能。

参考文章：

小程序实现数据监听

小程序如何在其他页面监听globalData中值的变化？

微信小程序设置简单的监听器

    实现图片轮播功能且高度要自适应。

    使用小程序自带组件swiper。

     关键点 ：就是要计算出当前图片的高度并赋值给swiper高度。需要计算是由于swiper必须指定高度不能像div一样自动撑开。

    难点：

    1、问题：切换页面返回 由onhide—>onshow时，出现所有的高度会保持颂祥在最后计算出的那个值，导致高度自适应效果失效。

         原滚哗因：是由于此时imageLoad不再监听。

         解决办法：watch图片列表，给url加参数（时间戳），使其每次都重新加载，使imageLoad监听。野备搏

    2、问题：切换到后台再返回到前台时，初始高度会保持出现在第一张图片的高度，若切换时非第一张图片，就会导致给当前图片高度不正确，被遮挡或者有大片空白。

         原因：给swiper赋值的是 图片列表里第一张的高度。

         解决办法：后台切回前台时，appdata是保持不变的，而当前图片排位已被保存变量，所以取当前图片的高度赋值给swiper高度。

    3、问题：此组件所在页面，下面有跳转到当前页的业务需要，只是渲染数据不同。当返回前一个页面时，初始高度还保留着返回前最后一次的高度，与当前页当前图片高度不符。

         原因：同页面切换时，appdata没有重新赋值的话就不会变化，最后当前图片变量取值了最后出现的那个页面的当前图片。

        解决办法：每切换到一个页面时，在图片组件里，缓存以页面数:当前图片为键值的currents对象。返回到某个页面时，通过当前页面数取得当前图片，从而获得当前初始高度。

PS ： 在设计和解决这些难点时，均遵循着组件的高内聚、低耦合原则，使得更具复用性、稳定性、无依赖。

ps：很多时候开始发现是未解的，待解决之后发现原来并没什么，