【小程序】没有数据时，友好提示

没有数据时，友好提示

第一版本

先看效果：

代码目录：

代码演示：

index.html

<view class="noMessages" wx:if="{{!messageList.length}}">
    <image src="../../images/空.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
    <view class="noMessages-text">
    <text>暂无任何消息</text>
    </view>
</view>

index.js

Page({
  /* 页面的初始数据 */
  data: {
    messageList:[]  // 聊天消息
  }
})

index.wxss

.noMessages{
    display:flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%,-50%);
}

.noMessages-text{
    font-size: 36rpx;
    position: absolute;
    top: 46%;
    color: blue;
}

第二版本

先看效果:

代码演示：

index.html

<view class="noMessages" wx:if="{{!messageList.length}}">
    <image src="../../images/空.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
    <text>暂无任何消息</text>
</view>

index.wxss

.noMessages{
    display:flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%,-50%);
}