🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] # 条件渲染&&列表渲染 条件渲染以及列表渲染作为数据驱动视图的重要部分,值得一提 1.条件渲染的` wx:if` 以及 `hidden` * `wx:if` 会产生局部渲染,销毁条件块(或者重新渲染) * `hidden` 就是直接控制 `display block/none` 了 所以官网给出的结论是 > 一般来说,`wx:if` 有更高的切换消耗而 `hidden` 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 `wx:if` 较好。 2.列表渲染 ```html <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this"> {{idx}}: {{itemName.message}} </view> ``` 这里其他 for,index,item 这些循环渲染基本的东西就不具体说了,谈谈这个 wx:key 假如我们更新array数组,预期来说视图重新渲染,但是我们假如只是在 array 中 push 更多的元素,我们的想法应该是重新排序,不去重复创建视图原来已经有的元素,这里为了标识 item,我们就可以用 wx:key ,有助于提升渲染的效率,并且能够保持状态(如`<input/>`中的输入内容,`<switch/>`的选中状态) # video 组件 开发时用到video组件,遇到一些问题也拿出来讲下 首先开发者需要记住的一个很重要的点 > map、canvas、video、textarea 是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。 原生组件暂时还无法放在 scroll-view 上,也无法对原生组件设置 css 动画。 其次video组件是没办法跟着屏幕滚动的,假如你放了一个video组件fixed在顶部,它也是无法跟着屏幕滚动的,开发者工具可以实现,但是真机滚动后是会出现黑影的,视频还是一直定位在原来的位置(这个也体现了本文开头的环境的区别),要解决这个问题就只能是不能全屏滚动,用页面的一部分scroll-view滚动即可,让视频不用滚动 还有一个就是video组件其实你用wx:if去控制渲染隐藏是有问题的,当你多次切换,会发现在某些机型上发热严重,抓包发现之前创建的video实例并没有真正地随着wx:if销毁,还在请求数据,所以,假如需要控制渲染隐藏video组件的时候,可以尝试使用hidden属性配合wx.createVideoContext控制暂停来解决问题 # swiper-view 实现频道滑动切换 为了实现跟原生应用接近的体验,采用手势左右滑动来实现频道切换 先讲讲swiper-view如何实现滑动的呢? ![](http://7xp9v5.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202017-07-25%20%E4%B8%8B%E5%8D%886.14.03.png) 从上图swiper-item可以看到其实就是改变translate去实现的 swiper-item绝对定位,并加入will-change:auto提升为合成层,在实现动画translate时让页面不发生重绘,在GPU完成 注意到一个 absolute,所以swiper-item内部的内容是无法把外部给撑开的,所以无法实现自适应,必须自己指定高度 我们的需求是要实现上面预留导航栏,全屏滑动,css上就可以这样 ```css page { box-sizing: border-box; -webkit-box-sizing: border-box; height: 100%; /* 预留顶部导航栏 */ padding-top: 89rpx; } .swiper-container { height: 100%; } ``` 假如你还想在里面放入可滚动的列表项,毫无疑问得使用scroll-view,而不是 view(overflow:auto)了,不然reachBottom 的触发就会出问题,因为本来就只有一屏了 加入 scroll-view 的话,Page 下拉加载是跟 scroll-view 相冲突的,所以要么抛弃下拉加载,要么只能使用触顶加载 # 小程序性能调优 近期官网也出来了一个优化建议,开发者务必要看看 > [优化建议](https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html) 大体上就是 * 不要频繁地去setData,能合成一个setData尽量合成一个 * 不需要视图更新的data不要使用setData * setData数据不要过大(当数据量过大时会增加脚本的编译执行时间,占用 WebView JS 线程) * 由于用户使用小程序是从CDN下载,并且目前小程序打包是会将工程下所有文件都打入代码包内(这个还是需要小程序那边优化,按需会好点),所以目前你代码包多放东西,意味着用户得多下资源,多耗费流量,首次打开速度也会变慢