微信小程序之自定义toast实例 —— 微信小程序实战系列

wxss:

Page {

background: #fff;

}

/按钮/

.btn {

font-size: 28rpx;

padding: 15rpx 30rpx;

width: 100rpx;

margin: 20rpx;

text-align: center;

border-radius: 10rpx;

border: 1px solid #000;

}

/mask/

.toast_mask {

opacity: 0;

width: 100%;

height: 100%;

overflow: hidden;

position: fixed;

top: 0;

left: 0;

z-index: 888;

}

/toast/

.toast_content_box {

display: flex;

width: 100%;

height: 100%;

justify-content: center;

align-items: center;

position: fixed;

z-index: 999;

}

.toast_content {

width: 50%;

padding: 20rpx;

background: rgba(0, 0, 0, 0.5);

border-radius: 20rpx;

}

.toast_content_t

  • 27
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序toast是一种轻量级的提示框组件,一般用于展示简短的文字信息。然而,toast组件并不支持直接显示图片。不过我们可以通过一些技巧间接实现在toast中显示图片的效果。 一种常用的方法是在toast中使用自定义的图标,而不是直接显示图片。我们可以使用Font Awesome等图标库中的图标,然后在toast中设置相应的图标类名,从而实现在toast中显示图标的效果。这个图标可以是一个代表图片的图标,这样就能给用户一个视觉上的提示,让用户知道图片相关的内容。 另一种方法是结合toast组件和一个自定义的弹窗组件来实现。我们可以使用弹窗组件来展示图片,并设置一个透明的背景色,从而实现类似于toast的效果。在弹窗中展示图片后,我们可以设置一个定时器,在一定的时间后关闭弹窗,从而达到toast显示图片的效果。 除此之外,我们还可以考虑使用其他的提示组件,如基于canvas等技术实现的自定义提示组件,从而实现在微信小程序中直接在toast中显示图片的效果。这种方式相对来说比较复杂,需要开发者自己实现,并且可能会涉及到一些底层的API或者库的使用。 综上所述,微信小程序toast组件本身并不支持直接显示图片,但我们可以通过一些技巧或者组合其他的组件来实现在toast中显示图片的效果。开发者可以根据自己的需求和技术水平选择合适的方法来实现这个功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值