微信小程序自定義toast的實現(xiàn)代碼

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:03:43

微信小程序自定義toast的實現(xiàn)代碼

微信小程序自定義toast的實現(xiàn)代碼:今天寫微信小程序突然發(fā)現(xiàn)一個尷尬的問題，請求報錯需要提示，就去小程序API里找，可悲的小程序的toast并不能滿足我的需求，原生提供的方法調(diào)用如下 wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true }

推薦度：

點擊下載本文 文檔為doc格式

導讀微信小程序自定義toast的實現(xiàn)代碼:今天寫微信小程序突然發(fā)現(xiàn)一個尷尬的問題，請求報錯需要提示，就去小程序API里找，可悲的小程序的toast并不能滿足我的需求，原生提供的方法調(diào)用如下 wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true }

今天寫微信小程序突然發(fā)現(xiàn)一個尷尬的問題，請求報錯需要提示，就去小程序API里找，可悲的小程序的toast并不能滿足我的需求，原生提供的方法調(diào)用如下

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

下面是官方API的說明

可以看到支持的圖標只有兩種，連基本的warning和error都沒有，最可悲的是title最多只支持7個漢字的長度，完全不能忍啊，現(xiàn)在哪個框架里還沒有個正兒八經(jīng)提示框的組件，想想還是自己寫一個算了，下面是效果圖

下面來說下小程序?qū)崿F(xiàn)自定義公共組件的方法，以自定義toast為例

1、新建toast組件

在toast.json里修改如下，設(shè)置為組件

{
 "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支持 
 },
 /** 
 * 私有數(shù)據(jù),組件的初始數(shù)據(jù) 
 * 可用于模版渲染 
 */
 data: { // 彈窗顯示控制 
 animationData: {},
 content: '提示內(nèi)容'
 },
 /**
 * 組件的方法列表 
 */
 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、在父級組件中調(diào)用公共組件，以login頁面為例

在login.json中注冊組件

{
 "navigationBarTitleText": "登錄注冊",
 "usingComponents":{
 "toast": "../common/toast/toast"
 }
}

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

onReady: function () {
 this.toast = this.selectComponent("#toast");
},
listenerLogin: function() {
 this.dialog.showToast('恭喜你，獲得了toast');
},

總結(jié)

以上所述是小編給大家介紹的微信小程序自定義toast的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

微信小程序自定義toast的實現(xiàn)代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：小程序微信小程序實現(xiàn)

熱門焦點

微信小程序自定義toast的實現(xiàn)代碼

微信小程序自定義toast的實現(xiàn)代碼

微信小程序自定義toast的實現(xiàn)代碼

最新推薦

猜你喜歡

熱門推薦