欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序自定义toast的实现代码

程序员文章站 2023-08-31 23:30:44
今天写微信小程序突然发现一个尴尬的问题,请求报错需要提示,就去小程序api里找,可悲的小程序的toast并不能满足我的需求,原生提供的方法调用如下 wx.show...

今天写微信小程序突然发现一个尴尬的问题,请求报错需要提示,就去小程序api里找,可悲的小程序的toast并不能满足我的需求,原生提供的方法调用如下

wx.showtoast({
  title: '成功',
  icon: 'succes',
  duration: 1000,
  mask:true
})

下面是官方api的说明

可以看到支持的图标只有两种,连基本的warning和error都没有,最可悲的是title最多只支持7个汉字的长度,完全不能忍啊,现在哪个框架里还没有个正儿八经提示框的组件,想想还是自己写一个算了,下面是效果图

下面来说下小程序实现自定义公共组件的方法,以自定义toast为例

1、新建toast组件

在toast.json里修改如下,设置为组件

{
 "component": true
}

toast.wxml

<view class='wx-toast-box' animation="{{animationdata}}">
 <view class='wx-toast-content'>
  <view class='wx-toast-toast'>{{ content }}</view>
 </view>
</view>

定义样式,toast.wxss,这里使用flex布局,代码很简单,也没什么好说的,直接贴上

.wx-toast-box{
 display: flex;
 width: 100%;
 justify-content: center;
 position: fixed;
 z-index: 999;
 bottom:80rpx;
 opacity: 0;
}
.wx-toast-content{
 max-width: 80%;
 border-radius:30rpx;
 padding: 30rpx;
 background: rgba(0, 0, 0, 0.6);
}
.wx-toast-toast{
 height: 100%;
 width: 100%;
 color: #fff;
 font-size: 28rpx;
 text-align: center;
}

toast.js

component({
 options: {
  multipleslots: true // 在组件定义时的选项中启用多slot支持 
 },
 /** 
  * 私有数据,组件的初始数据 
  * 可用于模版渲染 
  */
 data: { // 弹窗显示控制 
  animationdata: {},
  content: '提示内容'
 },
 /**
  * 组件的方法列表 
  */
 methods: {
  /** 
   * 显示toast,定义动画
   */
  showtoast(val) {
   var animation = wx.createanimation({
    duration: 300,
    timingfunction: 'ease',
   })
   this.animation = animation
   animation.opacity(1).step()
   this.setdata({
    animationdata: animation.export(),
    content: val
   })
   /**
    * 延时消失
    */
   settimeout(function () {
    animation.opacity(0).step()
    this.setdata({
     animationdata: animation.export()
    })
   }.bind(this), 1500)
  }
 }
})

2、在父级组件中调用公共组件,以login页面为例

在login.json中注册组件

{
 "navigationbartitletext": "登录注册",
 "usingcomponents":{
  "toast": "../common/toast/toast"
 }
}

login.wxml中调用组件

<view>
 <toast id='toast'>
 </toast>
</view>

login.js里点击登陆录的时候调用显示showdialog方法

onready: function () {
  this.toast = this.selectcomponent("#toast");
},
listenerlogin: function() {
  this.dialog.showtoast('恭喜你,获得了toast');
},

总结

以上所述是小编给大家介绍的微信小程序自定义toast的实现代码,希望对大家有所帮助