微信小程序自定义烤组件的方法详解【含动画】

本文实例讲述了微信小程序自定义烤组件的方法。分享给大家供大家参考，具体如下：

怎么创建就不说了，前面一篇有微信小程序自定义提示组件直接上代码

页面结构

！-组件/吐司/吐司。wxml-view class=' toast-box { { isShow ' ' show ' : ' ' } } ' animation=' { { animation data } } ' view class=' toast-content ' view class=' toast-img ' block wx : if=' { { type=' success ' } ' image class=' toast-icon ' src=' http : xx '/block wx 3: if=' { { type=' fail ' } ' image class=' toast-icon '

//组件/土司/土司。js组件({ properties : }，data: { type: 'fail '，title: '你还没有勾选呢!'，isShow: false，animationData: '' }，methods: { showToast:函数（数据){ const self=this如果（这个_ ShowTiMer){ clearTiMer超时(这_showTimer) }如果(这._animationTimer) { clearTimeout(这_animationTimer) } //显示需要先设置为街区之后，才能执行动画这个。setdata({ title : data。title，type: data.type，isShow: true，})；这个_动画定时器=setTimeout(()={ const animation=wx。创建动画({持续时间： 500，timingFunction: ' ease '，延迟： 0 })动画。不透明度(1).step()；自我。setdata({ animationData:)动画。export()，}) }，50)这个_ show timer=setTimeout(function(){ self。HideToast()；if(数据。完整(数据类型。complete==' function '){ data。complete()} }，1200 || (50 data.duration)) }，hide toast : function(){ if(this ._ HideTiMer){ ClearTiME(这_hideTimer) }让动画=wx。创建动画({持续时间： 200，定时功能： '轻松'，延迟： 0 })动画。不透明度(0)。step()；这个。setdata({ animationData:)动画。export()，})这个_ hidetime=setTimeout(()={ this。setdata({ isshow : false，}) }，250)} })JSON

{ 'component': true，' usingComponents': {}}wxss

/*组件/吐司/吐司。wxss */.吐司盒{位置：绝对值；左： 0；top : 0；宽度： 100%;高度： 100%;z指数： 11；显示器：无；opa城市3360 0；}.显示{显示：块；}.吐司-内容{位置：绝对；左侧： 50%;前：名35%；宽度： 350 rpx/*高度： 250 rpx*/边框-半径： 10 rpx箱式： bor dre-box；transform: translate(-50%，-50%)；背景： rgba(0，0，0，7);}.吐司-img { width : 100%；height : 120 rpx add-top : 15 rpx；箱式： bor dre-box；文本对齐：中心；}.toast-icon { width : 100 rpx；高度： 100 rpx}.吐司标题{宽度： 100%；padding:10rpx线高： 65 rpx颜色：白色；文本对齐：中心；font-size : 40 rpx盒子尺寸：边框盒子；}使用

例如，在index.html中使用

在数据中添加使用组件属性

使用ComPonents ' : { ' vas-prompt ' : ' ./components/toast/toast'}wxml

vas-toast id=' toast '/vas-toast按钮绑定点击=' show toast '点击弹出吐司/按钮j

//在函数生命周期函数中，先获取提示实例onready :函数(){ this。提示=这个。select component(' # toast ')；}，showtoast :函数(){ this。吐司。showtoast({ type : ' success '，title: '测试弹出消息，duration: 1000，完成：功能(){ console。日志('吐司框隐藏之后，会调用该函数') //例如：跳转页面wx。navigateto({ URL : ' XXX ' })；} })},效果

希望本文所述对大家微信小程序开发有所帮助。