以无数据时的PlaceHolder占位图为例

关键的区别是display设置为hidden更有利于控制显示时机，与wx:if只要条件满足就执行。

小程序文档原文

wx:if vs hidden
因为 wx:if 之中的模板也可能包含数据绑定，所有当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染……

文档出处：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/conditional.html

对上面这段话，一直觉得很抽象，看得人似懂非懂。于是找了个场景holder页。

场景

当列表无数据时可用，比如没有订单，没有收货地址

解决方式

使用display: none与block，如果使用wx:if，会出现占位图一闪而过，因为result.length的判断通过网络加载需要时间。

样式

/*初始隐藏*/
.hidden {
    display: none;
}

/*运行时显示*/
.show {
    display: block;
}

布局

<!-- 空白占位 -->
<view class="holder {{visual}}">
    <image src="/images/holder.png" />
    <view>您还没有地址，可以点击底部按钮新建地址</view>
</view>

这里不使用<view class="holder" wx:if="{{addressList.length}}">，防止页面初始时的闪动

js

data: {
    visual: 'hidden'
},
...
query.find().then(function (results) {
    that.setData({
        addressList: results,
        visual: results.length ? 'hidden' : 'show'
    });
});

其中页面要先给个hidden值到setData中，这样初始加载是不显示的，至于显示与否取决于结果集的长度。

一点小tip，以记。

源码下载：关注公众号【黄秀杰】，回复112。本文代码涉及代码位于address/list/list文件夹。