微信小程序 自定義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({ /** * 頁面的初始數(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)聽頁面加載 */ onLoad: function (options) { },})
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序 toast組件詳細(xì)介紹
- 微信小程序開發(fā)之toast等彈框提示使用教程
- 微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框
- 微信小程序開發(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)畫】
相關(guān)文章
前端必會(huì)的package.json創(chuàng)建及常見屬性用法示例詳解
這篇文章主要為大家介紹了前端必會(huì)的package.json創(chuàng)建及常見屬性用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08JavaScript策略模式利用對(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)資料,希望通過本文能幫助到大家,實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-10-10JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)學(xué)生信息管理系統(tǒng),文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)js的小伙伴們有一定的幫助,需要的朋友可以參考下2021-04-04微信小程序之頁面跳轉(zhuǎn)和參數(shù)傳遞的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序之頁面跳轉(zhuǎn)和參數(shù)傳遞的實(shí)現(xiàn)的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09詳解JavaScript中數(shù)組的相關(guān)知識(shí)
這篇文章主要介紹了JavaScript中中數(shù)組的相關(guān)知識(shí),是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-07sessionStorage多Tab標(biāo)簽頁數(shù)據(jù)共享問題分析
這篇文章主要為大家介紹了sessionStorage多Tab標(biāo)簽頁數(shù)據(jù)共享問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07