這篇文章主要介紹了微信小程序怎么實現(xiàn)自定義Toast彈框的相關知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信小程序怎么實現(xiàn)自定義Toast彈框文章都會有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站建設、網(wǎng)站重做改版、北屯網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5頁面制作、商城網(wǎng)站建設、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為北屯等各大城市提供網(wǎng)站開發(fā)制作服務。

先來看一下效果圖：

怎么用呢，我們來看一下：

WeTaost插件源碼位于src目錄下，包含3個文件。

• wetoast.js: 腳本代碼

• wetoast.wxml: 模板結構

• wetoast.wxss: 樣式

  
  

使用時只需要加入以上3個文件即可

第一步：在項目的app.js中引入wetoast.js，并注冊到小程序上，小程序所有Page頁面均可使用

//app.js
let {WeToast} = require('src/wetoast.js')

//注冊小程序，接收一個Object參數(shù)
App({
 WeToast
})

第二步：在項目的app.wxss中引入wetoast.wxss

@import "src/wetoast.wxss";

至于里面的樣式，彈框大小，可自行修改。

第三步：引入WeToast模板

<import src="../../src/wetoast.wxml"/>
<!-- wetoast -->
<template is="wetoast" data="{{...__wetoast__}}"/>

最后要想在那個頁面使用，就在onLoad里面創(chuàng)建WeToast實例：

// 獲取應用實例
let app = getApp()

Page({
 data: {},

 // 僅執(zhí)行一次，可用于獲取、設置數(shù)據(jù)
 onLoad: function () {
  //創(chuàng)建可重復使用的WeToast實例，并附加到this上，通過this.wetoast訪問
  new app.WeToast()
 },

 onTimeToast: function () {
  this.wetoast.toast({
   title: '請輸入手機號',
   duration: 1000
  })
 }
})

關于“微信小程序怎么實現(xiàn)自定義Toast彈框”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“微信小程序怎么實現(xiàn)自定義Toast彈框”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：微信小程序怎么實現(xiàn)自定義Toast彈框-創(chuàng)新互聯(lián)
分享鏈接：http://jinyejixie.com/article9/ccsjih.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站設計、電子商務、網(wǎng)頁設計公司、品牌網(wǎng)站設計、網(wǎng)站導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)