微信小程序自定義toast的實(shí)現(xiàn)代碼
今天寫(xiě)微信小程序突然發(fā)現(xiàn)一個(gè)尷尬的問(wèn)題，請(qǐng)求報(bào)錯(cuò)需要提示，就去小程序API里找，可悲的小程序的toast并不能滿(mǎn)足我的需求，原生提供的方法調(diào)用如下
wx.showToast({
title: '成功',
icon: 'succes',
duration: 1000,
mask:true
})
下面是官方API的說(shuō)明
可以看到支持的圖標(biāo)只有兩種，連基本的warning和error都沒(méi)有，最可悲的是title最多只支持7個(gè)漢字的長(zhǎng)度，完全不能忍啊，現(xiàn)在哪個(gè)框架里還沒(méi)有個(gè)正兒八經(jīng)提示框的組件，想想還是自己寫(xiě)一個(gè)算了，下面是效果圖
下面來(lái)說(shuō)下小程序?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布局，代碼很簡(jiǎn)單，也沒(méi)什么好說(shuō)的，直接貼上
.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)畫(huà)
*/
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頁(yè)面為例
在login.json中注冊(cè)組件
{
"navigationBarTitleText": "登錄注冊(cè)",
"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)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 微信小程序 toast組件詳細(xì)介紹
- 微信小程序開(kāi)發(fā)之toast等彈框提示使用教程
- 微信小程序開(kāi)發(fā)之實(shí)現(xiàn)自定義Toast彈框
- 微信小程序開(kāi)發(fā)之toast提示插件使用示例
- 微信小程序?qū)崙?zhàn)之自定義toast（6）
- 微信小程序 toast 詳解及實(shí)例代碼
- 微信小程序 Toast自定義實(shí)例詳解
- 微信小程序 自定義Toast實(shí)例代碼
- 微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼
- 微信小程序自定義toast實(shí)現(xiàn)方法詳解【附demo源碼下載】
- 微信小程序使用component自定義toast彈窗效果
- 微信小程序自定義toast組件的方法詳解【含動(dòng)畫(huà)】
相關(guān)文章
JS觸發(fā)事件event.target VS event.currentTarget實(shí)例
這篇文章主要介紹了JS觸發(fā)事件event.target VS event.currentTarget實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
Fetch?API提供了一個(gè)JavaScript接口，用于訪(fǎng)問(wèn)和操縱HTTP管道的部分。它還提供了一個(gè)全局?fetch()方法，該方法提供了一種簡(jiǎn)單，合理的方式來(lái)跨網(wǎng)絡(luò)異步獲取資源。本文將詳解JS如何使用Fetch，感興趣的可以學(xué)習(xí)一下2022-05-05
javascript的switch用法注意事項(xiàng)分析
這篇文章主要介紹了javascript的switch用法注意事項(xiàng),實(shí)例分析了switch語(yǔ)句進(jìn)行判定的原理與使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JavaScript詞法作用域的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
網(wǎng)頁(yè)與鍵盤(pán)...2006-07-07
在window.setTimeout方法中傳送對(duì)象
setTimeout方法是js中的延時(shí)方法，很多js的bug，只需要使用該方法延時(shí)一下，就會(huì)自動(dòng)解決了，簡(jiǎn)直就是萬(wàn)能藥方，也是我比較喜歡使用的最后手段。2006-12-12
微信小程序通過(guò)websocket實(shí)時(shí)語(yǔ)音識(shí)別的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序通過(guò)websocket實(shí)時(shí)語(yǔ)音識(shí)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
jquery的寫(xiě)法從事web開(kāi)發(fā)的人員應(yīng)該不會(huì)陌生吧，下面我們要說(shuō)的是使用js模仿jquery寫(xiě)法的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-06-06
JavaScript中隨機(jī)數(shù)方法?Math.random()
這篇文章主要介紹了JavaScript中隨機(jī)數(shù)方法?Math.random()，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
正因?yàn)镴avaScript本身沒(méi)有完整的類(lèi)和繼承的實(shí)現(xiàn)，并且我們也看到通過(guò)手工實(shí)現(xiàn)的方式存在很多問(wèn)題， 因此對(duì)于這個(gè)富有挑戰(zhàn)性的任務(wù)網(wǎng)上已經(jīng)有很多實(shí)現(xiàn)了2009-07-07