关于微信小程序的错误提示,官方只提供了弹窗模式的一些,且提示的文字长度有限制,有时候需要采用在顶部显示错误提示,那么就需要自定义样式。首先显示下效果图如下
如何实现这样的效果呢? 接下来直接上小程序代码。
首先在 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: