微信小程序の自定义顶部错误提示动画

微信小程序の自定义顶部错误提示动画

关于微信小程序的错误提示，官方只提供了弹窗模式的一些，且提示的文字长度有限制，有时候需要采用在顶部显示错误提示，那么就需要自定义样式。首先显示下效果图如下

如何实现这样的效果呢？ 接下来直接上小程序代码。

首先在 wxml 文件中加入显示view，只是简单的一行代码哈哈哈哈

<view class="err-show" wx:if="{{errorMessage}}">{{errorMessage}}</view>

解释一下，errorMessage 是在 js 的data中定义的，用于错误提示的内容，初始化时为空。wx:if 的作用是当错误提示内容不为空时，就渲染显示这个view，以达到有错误的自动渲染，没有错误时就不会渲染也就不会显示了。

看下 err-show 的样式，在 wxss 中加入如下样式即可。可以根据自己的需求，修改相应的属性值。

.err-show {background: #f36127;color: #fff;height: 58rpx;line-height: 58rpx;font-size: 24rpx;text-align: center;position: absolute;left: 0;top: 0;width: 100%;z-index: 3;letter-spacing: 5rpx;
}

如何在错误出现时 巧妙的使用errorMessge值呢？

在 js 文件中的data 初始化此值为空

 data: {errorMessage: ''},

在相关的请求中，错误或失败时设置 errorMessage 值

wx.request({url:'',method: '',header: {},data: {},success: res => {},fail: error => {this.setData({errorMessage: '服务器连接失败'});this.ohShitfadeOut();}
})

ohShitfadeOut()方法时作动画效果的，就是显示的时候会从上往下滑动，且会自动消失。这里默认显示2秒后自动消失，2000 就是显示的时长，为毫秒。

ohShitfadeOut() {var fadeOutTimeout = setTimeout(() => {this.setData({errorMessage: ''});clearTimeout(fadeOutTimeout);}, 2000);
}