微信小程序 自定義Toast實例代碼
更新時間：2017年06月12日 11:13:38 作者：UFO00001
這篇文章主要介紹了微信小程序 自定義Toast實例代碼的相關資料,需要的朋友可以參考下
微信小程序 自定義Toast實例代碼
Toast樣式可以根據需求自定義，本例中是圓形
<!--按鈕-->
<view class="btn" bindtap="btn_toast">自定義Toast</view>
<!--以下為toast顯示的內容 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({
/**
* 頁面的初始數據
*/
data: {
//toast默認不顯示
isShowToast: false
},
showToast: function () {
var _this = this;
// toast時間
_this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 1000;
// 顯示toast
_this.setData({
isShowToast: true,
});
// 定時器關閉
setTimeout(function () {
_this.setData({
isShowToast: false
});
}, _this.data.count);
},
/* 點擊按鈕 */
btn_toast: function () {
console.log("點擊了按鈕")
//設置toast時間，toast內容
this.setData({
count: 1500,
toastText: '自定義',
toastText1: 'Toast'
});
this.showToast();
},
/**
* 生命周期函數--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},})
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
ComponentLoader?與動態(tài)組件實例詳解
這篇文章主要為大家介紹了ComponentLoader?與動態(tài)組件實現實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了前端項目中監(jiān)聽localStorage的變化的解決思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了微信小程序 選擇器（時間，日期，地區(qū)）實例詳解的相關資料,這里提供了實例代碼及實現效果圖，幫助大家學習理解這部分知識，需要的朋友可以參考下2016-11-11
解析JS參數parseInt('012',?16)和parseInt(012,?16)是否相等
這篇文章主要為大家介紹了parseInt('012',?16)和parseInt(012,?16)是否相等原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
微信小程序 動態(tài)的設置圖片的高度和寬度詳解及實例代碼
這篇文章主要介紹了微信小程序 動態(tài)的設置圖片的高度和寬度詳解及實例代碼的相關資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了?如何利用JavaScript寫一個簡單計算器，利用JavaScript寫一個簡單計算器算是一個簡單的小練習吧，需要的小伙伴可以參考一下<BR>2021-11-11
這篇文章主要為大家介紹了JavaScript手寫異步加法asyncAdd方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了一次JS滾動到頂部踩坑解決記錄過程分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了JavaScript中單例模式的應用場景案例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了JavaScript組合繼承，下面文章將圍繞了JavaScript組合繼承的相關資料展開詳細內容,需要的小伙伴可以參考一下，希望對你有所幫助2021-11-11