微信小程序van-empty如何在页面加载完再实现？

Question

我在wxml文件中加入了<block wx:if="{{list.length==0}}"><van-empty description="暂无信息" /></block>
在js文件中定义了list:[],
在onload的时候，类似如下的操作，这样就会在一打开页面的时候就会出现van-empty的提示信息，然后加载出数据。有没有很好的办法解决，在请求成功并返回数据的时候，页面直接出数据，而不是先出现van-empty的提示信息？
onLoad: function (options) {

wx.showLoading({
  title: '加载中',
})
wx.request({
    success (res) {
        wx.hideLoading();
        that.setData({})
    }
})

},

Answer 1

你可以设置一个判断条件 等待接口数据返回后再判断条件 showEmpty:false 默认值

<block wx:if="{{showEmpty}}"><van-empty description="暂无信息" /></block>

      async getList() {
            try {
                const res = await api()
                this.list = res.data
                if (res.data.length === 0) {
                    this.showEmpty = true //默认为false
                }
            } catch (err) {
                console.log(err)
            }
        }

Answer 2

根据你的描述，那就是你初始化的条件状态设置的问题了 wx:if="{{list.length==0}}"，一开始直接使用 list.length == 0 来判断，那自然在你异步设置数据之前肯定是没有值的，你可以再设置一个变量控制是否显示 empty ，默认值就是不显示，然后根据你的请求结果来设置就好了。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。