今天寫微信小程序突然發(fā)現(xiàn)一個(gè)尷尬的問題，請求報(bào)錯(cuò)需要提示，就去小程序API里找，可悲的小程序的toast并不能滿足我的需求，原生提供的方法調(diào)用如下
wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true})下面是官方API的說明
可以看到支持的圖標(biāo)只有兩種，連基本的warning和error都沒有，最可悲的是title最多只支持7個(gè)漢字的長度，完全不能忍啊，現(xiàn)在哪個(gè)框架里還沒有個(gè)正兒八經(jīng)提示框的組件，想想還是自己寫一個(gè)算了，下面是效果圖
下面來說下小程序?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 // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持 }, /** * 私有數(shù)據(jù),組件的初始數(shù)據(jù) * 可用于模版渲染 */ data: { // 彈窗顯示控制 animationData: {}, content: '提示內(nèi)容' }, /** * 組件的方法列表 */ methods: { /** * 顯示toast，定義動(dòng)畫 */ showToast(val) { var animation = wx.createAnimation({ duration: 300, timingFunction: 'ease', }) this.animation = animation animation.opacity(1).step() this.setData({ animationData: animation.export(), content: val }) /** * 延時(shí)消失 */ setTimeout(function () { animation.opacity(0).step() this.setData({ animationData: animation.export() }) }.bind(this), 1500) } }})2、在父級(jí)組件中調(diào)用公共組件，以login頁面為例
在login.json中注冊組件
{ "navigationBarTitleText": "登錄注冊", "usingComponents":{ "toast": "../common/toast/toast" }}login.wxml中調(diào)用組件
<view> <toast id='toast'> </toast></view>
login.js里點(diǎn)擊登陸錄的時(shí)候調(diào)用顯示showDialog方法
onReady: function () { this.toast = this.selectComponent("#toast");},listenerLogin: function() { this.dialog.showToast('恭喜你，獲得了toast');},總結(jié)
以上所述是小編給大家介紹的微信小程序自定義toast的實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
