微信小程序 自定義Toast實例代碼
更新時間:2017年06月12日 11:13:38 作者:UFO00001
這篇文章主要介紹了微信小程序 自定義Toast實例代碼的相關(guān)資料,需要的朋友可以參考下
微信小程序 自定義Toast實例代碼
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({
/**
* 頁面的初始數(shù)據(jù)
*/
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,
});
// 定時器關(guān)閉
setTimeout(function () {
_this.setData({
isShowToast: false
});
}, _this.data.count);
},
/* 點擊按鈕 */
btn_toast: function () {
console.log("點擊了按鈕")
//設(shè)置toast時間,toast內(nèi)容
this.setData({
count: 1500,
toastText: '自定義',
toastText1: 'Toast'
});
this.showToast();
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},})
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
您可能感興趣的文章:
- 微信小程序 toast組件詳細介紹
- 微信小程序開發(fā)之toast等彈框提示使用教程
- 微信小程序開發(fā)之實現(xiàn)自定義Toast彈框
- 微信小程序開發(fā)之toast提示插件使用示例
- 微信小程序?qū)崙?zhàn)之自定義toast(6)
- 微信小程序 toast 詳解及實例代碼
- 微信小程序 Toast自定義實例詳解
- 微信小程序自定義toast彈窗效果的實現(xiàn)代碼
- 微信小程序自定義toast實現(xiàn)方法詳解【附demo源碼下載】
- 微信小程序使用component自定義toast彈窗效果
- 微信小程序自定義toast的實現(xiàn)代碼
- 微信小程序自定義toast組件的方法詳解【含動畫】
相關(guān)文章
前端必會的package.json創(chuàng)建及常見屬性用法示例詳解
這篇文章主要為大家介紹了前端必會的package.json創(chuàng)建及常見屬性用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
JavaScript策略模式利用對象鍵值的映射關(guān)系詳解
這篇文章主要為大家介紹了JavaScript策略模式利用對象鍵值的映射關(guān)系詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12
詳解HTML5 使用video標簽實現(xiàn)選擇攝像頭功能
這篇文章主要介紹了詳解HTML5 使用video標簽實現(xiàn)選擇攝像頭功能的相關(guān)資料,希望通過本文能幫助到大家,實現(xiàn)這樣的功能,需要的朋友可以參考下2017-10-10
JavaScript+HTML實現(xiàn)學生信息管理系統(tǒng)
這篇文章主要介紹了JavaScript實現(xiàn)學生信息管理系統(tǒng),文中有非常詳細的代碼示例,對正在學習js的小伙伴們有一定的幫助,需要的朋友可以參考下2021-04-04
微信小程序之頁面跳轉(zhuǎn)和參數(shù)傳遞的實現(xiàn)
這篇文章主要介紹了微信小程序之頁面跳轉(zhuǎn)和參數(shù)傳遞的實現(xiàn)的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09
詳解JavaScript中數(shù)組的相關(guān)知識
這篇文章主要介紹了JavaScript中中數(shù)組的相關(guān)知識,是JS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-07-07
sessionStorage多Tab標簽頁數(shù)據(jù)共享問題分析
這篇文章主要為大家介紹了sessionStorage多Tab標簽頁數(shù)據(jù)共享問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07

