今天寫微信小程序突然發現一個尷尬的問題，請求報錯需要提示，就去小程序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的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
