第一步：新建乙個wxml檔案用來裝模板，方便以後使用，比如
然後在這裡面新增模板**
<第二步：定義toast的樣式template
name
="toast"
>
//name相當於模板的標識，引用的時候好判斷引用哪乙個
<
view
class
='toast-out'
wx:if
='}'
>
//wx：if是條件渲染，使用這個是為了好判斷是否顯示或隱藏toast
<
view
class
='toast-in'
>
<
span
class
='iconfont
}'>
span
>
//使用的阿里字型圖示，根據傳入的class值改變顯示的圖示
<
view
class
='toast-txt'
>
} //需要顯示的提醒內容
view
>
view
>
view
>
template
>
.toast-out .toast-out .toast-in .toast-out .toast-in span .toast-out .toast-in .toast-txt第三步：在需要彈窗的頁面import那個toast模板頁面：
<然後再在這個頁面任何地方引用模板import
src="../../public/html/template.wxml"
/>
<第四步：在引入彈窗頁面的js中template
is="toast"
data
="}"
>
template
>
在page的data裡先定義 isshow:false //預設隱藏的 但是我有點奇怪的是，不定義這個屬性，注釋掉，都能正常的隱藏與顯示。
然後定義乙個顯示彈窗的函式
toastshow:function然後在需要toast彈窗顯示的事件裡呼叫該事件就行了，比如：(str,icon));
settimeout(
function
() );
}, 1500);
}
log_btn:function結果：()}
圖示隨意弄的。。。
toastshow:
function
(that, str, icon));
settimeout(
function
() );
}, 1500);
}, })然後在需要引入彈窗的頁面：
在該頁面需要呼叫的函式中：
his_clear:function連線：小程式使用阿里字型圖示(),
總結： 和html不一樣，小程式中wx:if條件渲染就可以實現隱藏與顯示的wx:if="false"就是隱藏，true就是顯示。
使用display:flex彈性盒子布局很方便，就比如上面彈窗的水平與垂直居中，只要設定兩個屬性就可以了。不用再像以前一樣還需要設定其它的一堆，以前水平垂直居中的方法
補充：justify-content 的可選屬性有：flex-start（全靠左），flex-end（全靠右），center（居中），space-between，space-around，initial（從父元素繼承該屬性）
可檢視效果：
align-items 的可選屬性有：stretch，center，flex-start，flex-end，baseline（處於同一條基線），initial（設定為預設值），inherit（從父元素繼承該屬性）
可檢視效果：
微信小程式自定義元件（Toast）
一，自定義元件 1.元件模版和樣式 類似於頁面，自定義元件擁有自己的 wxml 模版和 wxss 樣式。元件模版的寫法與頁面模板相同。元件模版與元件資料結合後生成的節點樹，將被插入到元件的引用位置上。在元件模板中可以提供乙個 節點，用於承載元件引用時提供的子節點。元件對應 wxss 檔案的樣式，只對...
微信小程式自定義彈框
wxml 取消訂單 js data 取消訂單彈框 cancelorder 取消訂單彈框 確定 confirmmodal 取消訂單彈框 取消 closemodal wxss 取消訂單彈框 page body 遮罩層 modaldlg mask 彈出層 modaldlg modaldlg title m...
微信小程式自定義toast的實現
wx.showtoast 下面是官方api的說明 可以看到支援的圖示只有兩種，連基本的warning和error都沒有，最可悲的是title最多隻支援7個漢字的長度，完全不能忍啊，現在哪個框架裡還沒有個正兒八經提示框的元件，想想還是自己寫乙個算了，下面是效果圖 下面來說下小程式實現自定義公共元件的方...