微信小程序如何制作带动画效果的自定义toast组件？

本文共计768个文字，预计阅读时间需要4分钟。

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

如何创建自定义toast组件？

1. 首先在页面的json配置文件中引入组件：

json{ usingComponents: { toast: /components/toast/t }}

2. 在页面wxml文件中使用自定义toast组件：

3. 在页面js文件中定义showToast方法：

javascriptPage({ showToast: function() { this.selectComponent('.toast').show(); }});

4. 在自定义toast组件的wxml文件中定义结构：

{{content}}

5. 在自定义toast组件的wxss文件中定义样式：

css.toast { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 5px; color: #fff;}

.toast-content { padding: 10px; border-radius: 5px; background-color: #f00;}

6. 在自定义toast组件的js文件中定义逻辑：

javascriptComponent({ properties: { content: { type: String, value: '提示内容' }, hidden: { type: Boolean, value: true } }, methods: { show: function() { this.setData({ hidden: false }); setTimeout(()=> { this.setData({ hidden: true }); }, 2000); } }});

以上就是微信小程序自定义toast组件的方法。希望对大家有所帮助！

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

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

wxml

<!-- components/toast/toast.wxml --> <view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}"> <view class="toast-content" > <view class="toast-img"> <block wx:if="{{type==='success'}}"> <image class="toast-icon" src="xxx" /> </block> <block wx:if="{{type==='fail'}}"> <image class="toast-icon" src="xxx" /> </block> </view> <view class="toast-title">{{title}}</view> </view> </view>

js

// components/toast/toast.js Component({ properties: { }, data: { type: 'fail', title: '你还没有勾选呢！', isShow: false, animationData: '' }, methods: { showToast: function (data) { const self = this; if (this._showTimer) { clearTimeout(this._showTimer) } if (this._animationTimer) { clearTimeout(this._animationTimer) } // display需要先设置为block之后，才能执行动画 this.setData({ title: data.title, type: data.type, isShow: true, }); this._animationTimer = setTimeout(() => { const animation = wx.createAnimation({ duration: 500, timingFunction: 'ease', delay: 0 }) animation.opacity(1).step(); self.setData({ animationData: animation.export(), }) }, 50) this._showTimer = setTimeout(function () { self.hideToast(); if (data.compelete && (typeof data.compelete === 'function')) { data.compelete() } }, 1200 || (50 + data.duration)) }, hideToast: function () { if (this._hideTimer) { clearTimeout(this._hideTimer) } let animation = wx.createAnimation({ duration: 200, timingFunction: 'ease', delay: 0 }) animation.opacity(0).step(); this.setData({ animationData: animation.export(), }) this._hideTimer = setTimeout(() => { this.setData({ isShow: false, }) }, 250) } } })

json

{ "component": true, "usingComponents": {} }

wxss

/* components/toast/toast.wxss */ .toast-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 11; display: none; opacity: 0; } .show{ display: block; } .toast-content { position: absolute; left: 50%; top: 35%; width: 350rpx; /*height: 250rpx;*/ border-radius: 10rpx; box-sizing: bordre-box; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .7); } .toast-img{ width: 100%; height: 120rpx; padding-top: 15rpx; box-sizing: bordre-box; text-align: center; } .toast-icon{ width: 100rpx; height: 100rpx; } .toast-title { width: 100%; padding:10rpx; line-height: 65rpx; color: white; text-align: center; font-size: 40rpx; box-sizing: border-box; }

使用

例如，在index.html中使用

在json中添加useComponents属性

"usingComponents": { "vas-prompt": "./components/toast/toast" }

wxml

<vas-toast id='toast'></vas-toast> <button bindtap="showToast">点击弹出toast</button>

js

//在onReady生命周期函数中，先获取prompt实例 onReady:function(){ this.prompt = this.selectComponent("#toast"); }, showToast:function(){ this.toast.showToast({ type: 'success', title: '测试弹出消息', duration: 1000, compelete: function () { console.log('toast框隐藏之后，会调用该函数') //例如：跳转页面wx.navigateTo({ url: 'xxx' }); } }) },

效果

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