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

版权声明：版权属 ©胖子ღ牛逼，微信：xuewen-weiboweixin https://blog.csdn.net/z_xuewen/article/details/84647162

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

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

首先在 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);
}