在微信小程序中創建屬於自己的個性彈框

微信小程序提供的彈框模版就3種:
1、消息提示框
clipboard.png
對應的效果是這樣的

clipboard.png
這一種ui我們可以改變的額只有icon、image、title
2、模擬對話框

clipboard.png
對應的效果是這樣的:
clipboard.png
這一種做一些危險操作的提示之類等
3、顯示操作菜單

clipboard.png
對應效果如下:

clipboard.png

這種可以用來填寫某些選擇行的信息

看了以上3種彈框,發現和我們Ui差距較大,都用不上。於是我自己寫一個我的頁面專用的彈框,具體效果如下圖:

clipboard.png

以下是代碼貼圖

clipboard.png
最外層的phoneWin樣式主要是寫後面的遮罩層,content就是具體的彈框區域

clipboard.png
彈框的顯示隱藏用wx:if控制
然後就可以在彈框中寫自己想要展示的效果啦!

忽略部分未調整樣式

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章