微信小程式自定義toast的實現

2022-07-22 10:48:20 字數 1462 閱讀 8118

wx.showtoast()
下面是官方api的說明

可以看到支援的圖示只有兩種,連基本的warning和error都沒有,最可悲的是title最多隻支援7個漢字的長度,完全不能忍啊,現在哪個框架裡還沒有個正兒八經提示框的元件,想想還是自己寫乙個算了,下面是效果圖

下面來說下小程式實現自定義公共元件的方法,以自定義toast為例

1、新建toast元件

在toast.json裡修改如下,設定為元件

toast.wxml

class='

wx-toast-box

' animation="

}">

class='

wx-toast-content

'>

class='

wx-toast-toast

'>}

定義樣式,toast.wxss,這裡使用flex布局,**很簡單,也沒什麼好說的,直接貼上

.wx-toast-box

.wx-toast-content

.wx-toast-toast

toast.js

component(,

/** * 私有資料,元件的初始資料

* 可用於模版渲染

*/data: ,

content:

'提示內容'},

/** * 元件的方法列表

*/methods: )

this.animation =animation

animation.opacity(

1).step()

this

.setdata()

/*** 延時消失

*/settimeout(function () )

}.bind(

this), 1500

) }

}})

2、在父級元件中呼叫公共元件,以login頁面為例

在login.json中註冊元件

}

login.wxml中呼叫元件

'

toast

'>

login.js裡點選登陸錄的時候呼叫顯示showdialog方法

onready: function () ,

listenerlogin: function() ,

微信小程式自定義元件(Toast)

一,自定義元件 1.元件模版和樣式 類似於頁面,自定義元件擁有自己的 wxml 模版和 wxss 樣式。元件模版的寫法與頁面模板相同。元件模版與元件資料結合後生成的節點樹,將被插入到元件的引用位置上。在元件模板中可以提供乙個 節點,用於承載元件引用時提供的子節點。元件對應 wxss 檔案的樣式,只對...

微信小程式之自定義toast彈窗

第一步 新建乙個wxml檔案用來裝模板,方便以後使用,比如 然後在這裡面新增模板 template name toast name相當於模板的標識,引用的時候好判斷引用哪乙個 view class toast out wx if wx if是條件渲染,使用這個是為了好判斷是否顯示或隱藏toast v...

微信小程式自定義元件

父元素 子元件 可以由多個 子元件 a,b,c,d 父元素 首先是關於元件的建立 1 單獨建立乙個資料夾存放 wxss x.js wxml json這四個檔案,其中主要對元件進行宣告的是json檔案,需要寫入 這段 就是讓元件允許被使用,如果元件需要呼叫另乙個元件中,那麼就需要再usingcompe...