uni-app大法好，nvue 从入坑到放弃

分类：nvue

nvue

背景

APP上有一个顶部选项卡，切换列表的页面，该页面十分复杂
实际页面，可以看在线地址 https://beta.hongdan888.com/pages/competition/index

1 每个选项卡的列表数据能有400条
2 每个选项卡有两个弹窗筛选条件，多选或者多选
3 定时器，每10秒更新部分数据
4 实测在IOS上体验还可以，但是Android APP上比较卡顿。
5 本人对weex有一点了解，曾经想用他作为APP开发栈，但是感觉社区太冷清，运行起来各种问题，最终没敢用。
因此，考虑使用下nvue替换试试看。

目的

本文想告诉各位童鞋，不要轻易使用nvue，特别是复杂页面。虽然官方推荐复杂页面使用nvue性能更好，但是坑更不是一般的多。如果想尝试，先拿简单页面开刀！
笔者最终还是放弃了nvue，使用了uni-app

用到的组件

1 hello-uniapp中提供的 tab-nvue组件
2 自己开发的icon 、日历、单选复选筛选组件
5 weex ui中的mask 、overlay组件

坑在哪里

tab-nvue组件坑。

1 tab-content中只能是list 作为根组件，也就是说tab-content中只能有list refresh header loading cell这几个组件，而我们页面上面有一个日历或者轮次筛选，本人尝试了放在header中或者fix定位，最终没有成功。
2 灵机一动，在list的tab-content上再新增一个tab-content放筛选组件，这次成功了，但是问题来了，两个tab-content各占了半屏。原因是tab-content组件默认设置了flex：1的样式。
3 最终tab-content算是搞定了，虽然切换起来，上下两个tab-content不太一致，但也还能接受。毕竟看起来流畅了很多。

icon坑

自己写的icon例子，在weex在线编辑器测试正常，但是一旦作为组件，就无法显示。经历各种查文档后，算是搞定。可能单页运行和组件运行机制不一样。

mask弹窗的坑

1 弹窗内的数据发生更新时，在IOS上正常，但在Android上严重抖动。
2 原因，弹出默认位置和传入的prop中的位置参数不一致。但是为什么数据变化，样式也重新渲染，这就搞不懂了。
3 这直接导致一个问题，组件没办法复用，除非弹出的位置大小都一致。

动画的坑

1 列表上有个比赛进行中的，时间闪烁效果，使用css transform，分分钟搞定
2 weex，css只支持大小位置的变化，只能使用animation 模块来实现。
3 但是animation 的动画只能运行一次，要一直闪现怎么破，想到使用定时器。
4 已经想骂娘了，想放弃了，一个简单的动画，还要搞个定时器每过几秒执行一次。
5 想过使用gif做图，但还是想再尝试看看

生命周期的坑

1 列表中有两个两个定时器，一个定时动画，一个定时获取数据。但是页面离开时，要销毁定时器，页面显示要再创建定时器。
2 weex官方提供了一个全局事件，说是可以监听APP前台、后台事件；一个通用事件（appear ，Disappear），监听页面可见不可见事件
3 本人实测，IOS上全局事件有效，Android无效；通用事件无效。这时已经无解了。