[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下载,并且目前小程序打包是会将工程下所有文件都打入代码包内(这个还是需要小程序那边优化,按需会好点),所以目前你代码包多放东西,意味着用户得多下资源,多耗费流量,首次打开速度也会变慢