微信小程序 自定義Toast實(shí)例代碼
微信小程序 自定義Toast實(shí)例代碼
Toast樣式可以根據(jù)需求自定義,本例中是圓形

<!--按鈕-->
<view class="btn" bindtap="btn_toast">自定義Toast</view>
<!--以下為toast顯示的內(nèi)容 opacity為透明度-->
<view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}">
{{toastText}}
</view>
<view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}">
{{toastText1}}
</view>
Page {
background: #f9f9f9;
}
/*按鈕*/
.btn {
width: 20%;
margin-left: 38%;
margin-top: 100rpx;
text-align: center;
border-radius: 10rpx;
border: 10px solid #f00;
background: #f00;
color: #fff;
font-size: 22rpx;
}
/*toast*/
.toast_box {
width: 30%;
height: 221rpx;
margin-top: 60rpx;
margin-left: 35%;
text-align: center;
border-radius: 166rpx;
background: #f00;
color: #fff;
font-size: 32rpx;
line-height: 220rpx;
}
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
//toast默認(rèn)不顯示
isShowToast: false
},
showToast: function () {
var _this = this;
// toast時(shí)間
_this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 1000;
// 顯示toast
_this.setData({
isShowToast: true,
});
// 定時(shí)器關(guān)閉
setTimeout(function () {
_this.setData({
isShowToast: false
});
}, _this.data.count);
},
/* 點(diǎn)擊按鈕 */
btn_toast: function () {
console.log("點(diǎn)擊了按鈕")
//設(shè)置toast時(shí)間,toast內(nèi)容
this.setData({
count: 1500,
toastText: '自定義',
toastText1: 'Toast'
});
this.showToast();
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
},})
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序 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í)現(xiàn)代碼
- 微信小程序自定義toast實(shí)現(xiàn)方法詳解【附demo源碼下載】
- 微信小程序使用component自定義toast彈窗效果
- 微信小程序自定義toast的實(shí)現(xiàn)代碼
- 微信小程序自定義toast組件的方法詳解【含動(dòng)畫(huà)】
相關(guān)文章
前端必會(huì)的package.json創(chuàng)建及常見(jiàn)屬性用法示例詳解
這篇文章主要為大家介紹了前端必會(huì)的package.json創(chuàng)建及常見(jiàn)屬性用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
JavaScript策略模式利用對(duì)象鍵值的映射關(guān)系詳解
這篇文章主要為大家介紹了JavaScript策略模式利用對(duì)象鍵值的映射關(guān)系詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
詳解HTML5 使用video標(biāo)簽實(shí)現(xiàn)選擇攝像頭功能
這篇文章主要介紹了詳解HTML5 使用video標(biāo)簽實(shí)現(xiàn)選擇攝像頭功能的相關(guān)資料,希望通過(guò)本文能幫助到大家,實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-10-10
JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)學(xué)生信息管理系統(tǒng),文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)js的小伙伴們有一定的幫助,需要的朋友可以參考下2021-04-04
微信小程序之頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序之頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞的實(shí)現(xiàn)的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-09-09
詳解JavaScript中數(shù)組的相關(guān)知識(shí)
這篇文章主要介紹了JavaScript中中數(shù)組的相關(guān)知識(shí),是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-07
sessionStorage多Tab標(biāo)簽頁(yè)數(shù)據(jù)共享問(wèn)題分析
這篇文章主要為大家介紹了sessionStorage多Tab標(biāo)簽頁(yè)數(shù)據(jù)共享問(wèn)題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07

