用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

微信小程序自定义toast代码

天下雪 2017-4-24 00:08

来自原文地址小程序交互仅提供这些APIwx.showToast的效果是这样的,太难看了现在我们来自己写个toast一、我们把样式写在app.wxss里,这样每个地方都可以调用到/*toast start*/.wxapp-toast-mask{ opacity: 0; width: ...

来自原文地址 
小程序交互仅提供这些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);

五、效果:

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
来自: 原文地址

相关阅读