小程序模板网

微信小程序自定义toast代码

来自原文地址 
小程序交互仅提供这些API 

wx.showToast的效果是这样的,太难看了

现在我们来自己写个toast

一、我们把样式写在app.wxss里,这样每个地方都可以调用到

 

				
  1. /*toast start*/
  2. .wxapp-toast-mask{
  3. opacity: 0;
  4. width: 100%;
  5. height: 100%;
  6. overflow: hidden;
  7. position: fixed;
  8. top: 0;
  9. left: 0;
  10. z-index: 888;
  11. }
  12. .wxapp-toast-content-box {
  13. display: flex;
  14. width: 100%;
  15. height: 100%;
  16. justify-content: center;
  17. align-items: center;
  18. position: fixed;
  19. z-index: 999;
  20. }
  21. .wxapp-toast-content {
  22. width: 50%;
  23. padding: 20rpx;
  24. background: rgba(0, 0, 0, 0.7);
  25. border-radius: 20rpx;
  26. }
  27. .wxapp-toast-content-text {
  28. height: 100%;
  29. width: 100%;
  30. color: #fff;
  31. font-size: 28rpx;
  32. text-align: center;
  33. }
  34. /*toast end*/

二、JS也是写在在app.js里:

 

				
  1. //自定义Toast
  2. showToast: function(text,o,count){
  3. var _this = o;
  4. count = parseInt(count) ? parseInt(count) : 3000;
  5. _this.setData({
  6. toastText:text,
  7. isShowToast: true,
  8. });
  9. setTimeout(function () {
  10. _this.setData({
  11. isShowToast: false
  12. });
  13. },count);
  14. },

三、在需要调用的wxml文件中合适的地方加上下面代码:(比如index.wxml,注意:有container要放在里面)

 

				
  1. <view class="container">
  2. <!--wxapp-toast start-->
  3. <view class="wxapp-toast-content-box" wx:if="{{isShowToast}}">
  4. <view class="wxapp-toast-content">
  5. <view class="wxapp-toast-content-text">
  6. {{toastText}}
  7. </view>
  8. </view>
  9. </view>
  10. <!--wxapp-toast end-->
  11. </view>

(或者说把这段放到footer.wxml里,每个文件用include引用一下) 

四、然后在对应的js文件放一条代码:(比如对应的index.js)

 

				
  1. app.showToast('我是自定义的Toast',that,2000);

五、效果:



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23563.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询