微信小程序?qū)崿F(xiàn)自定義彈窗組件的示例代碼
上一篇中說的是小程序自帶的彈窗組件,今天,我們來試試小程序的自定義組件,我們自定義一個帶確定取消的彈窗組件。
首先,放一下,最終的效果圖:
這是我們最后要實(shí)現(xiàn)的效果
那么,首先,我們創(chuàng)建一個組件
新建component文件夾存放我們的組件,里邊存放的就是我們所用的組件,我們今天要做的事彈出框,新建文件夾popup存放我們的組件模板,點(diǎn)擊右鍵選擇新建component,就會自動生成組件的模板wxss、wxml、json、js,如圖
剩下的,就是不廢話了,上代碼:
編寫組件代碼
Dialog.wxml
<view class="wx-popup" hidden="{{flag}}"> <view class='popup-container'> <view class="wx-popup-title">{{title}}</view> <view class="wx-popup-con">{{content}}</view> <view class="wx-popup-btn"> <text class="btn-no" bindtap='_error'>{{btn_no}}</text> <text class="btn-ok" bindtap='_success'>{{btn_ok}}</text> </view> </view> </view>
Dialog.js
Component({ options: { multipleSlots: true // 在組件定義時的選項(xiàng)中啟用多slot支持 }, /** * 組件的屬性列表 */ properties: { title: { // 屬性名 type: String, // 類型(必填),目前接受的類型包括:String, Number, Boolean, Object, Array, null(表示任意類型) value: '標(biāo)題' // 屬性初始值(可選),如果未指定則會根據(jù)類型選擇一個 }, // 彈窗內(nèi)容 content: { type: String, value: '內(nèi)容' }, // 彈窗取消按鈕文字 btn_no: { type: String, value: '取消' }, // 彈窗確認(rèn)按鈕文字 btn_ok: { type: String, value: '確定' } }, /** * 組件的初始數(shù)據(jù) */ data: { flag: true, }, /** * 組件的方法列表 */ methods: { //隱藏彈框 hidePopup: function () { this.setData({ flag: !this.data.flag }) }, //展示彈框 showPopup () { this.setData({ flag: !this.data.flag }) }, /* * 內(nèi)部私有方法建議以下劃線開頭 * triggerEvent 用于觸發(fā)事件 */ _error () { //觸發(fā)取消回調(diào) this.triggerEvent("error") }, _success () { //觸發(fā)成功回調(diào) this.triggerEvent("success"); } } })
Dialog.wxss
/* component/popup.wxss */ .wx-popup { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); } .popup-container { position: absolute; left: 50%; top: 50%; width: 80%; max-width: 600rpx; border: 2rpx solid #ccc; border-radius: 10rpx; box-sizing: bordre-box; transform: translate(-50%, -50%); overflow: hidden; background: #fff; } .wx-popup-title { width: 100%; padding: 20rpx; text-align: center; font-size: 40rpx; border-bottom: 2rpx solid red; } .wx-popup-con { margin: 60rpx 10rpx; text-align: center; } .wx-popup-btn { display: flex; justify-content: space-around; margin-bottom: 40rpx; } .wx-popup-btn text { display: flex; align-items: center; justify-content: center; width: 30%; height: 88rpx; border: 2rpx solid #ccc; border-radius: 88rpx; }
組件的代碼,到這里就是完成了。
調(diào)用自定義組件
1:我們要在留言板中使用這個自定義組件,打開board.json,在usingComponents中增加如下代碼
"popup": "/component/popup/popup";
2:在board.wxml中引入組件
<!—自定義組件--> <view class="container"> <view class="userinfo"> <button bindtap="showPopup"> 點(diǎn)我 </button> </view> <popup id='popup' title='小組件' content='學(xué)會了嗎' btn_no='沒有' btn_ok='學(xué)會了' bind:error="_error" bind:success="_success"> </popup> </view>
3:在board.js中調(diào)用組件
//獲取應(yīng)用實(shí)例 const app = getApp() Page({ onReady: function () { //獲得popup組件 this.popup = this.selectComponent("#popup"); }, showPopup() { this.popup.showPopup(); }, //取消事件 _error() { console.log('你點(diǎn)擊了取消'); this.popup.hidePopup(); }, //確認(rèn)事件 _success() { console.log('你點(diǎn)擊了確定'); this.popup.hidePopup(); } })
至此,一個簡單的自定義組件的封裝及調(diào)用都完成了。
以上就是微信小程序?qū)崿F(xiàn)自定義彈窗組件的示例代碼的詳細(xì)內(nèi)容,更多關(guān)于微信小程序彈窗組件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
ES6學(xué)習(xí)筆記之let與const用法實(shí)例分析
這篇文章主要介紹了ES6學(xué)習(xí)筆記之let與const用法,結(jié)合實(shí)例形式分析了ES6中l(wèi)et與const的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-01-01能說明你的Javascript技術(shù)很爛的五個原因分析
Javascript在互聯(lián)網(wǎng)上名聲很臭,但你又很難再找到一個像它這樣如此動態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語言2011-10-10基于原生CSS+JS實(shí)現(xiàn)一個標(biāo)簽輸入框
在各種框架大行其道的氛圍下,有些原生的屬性和方法可能都不太關(guān)注了,這也不失為是一種損失。本文就將利用原生CSS+JS實(shí)現(xiàn)一個簡單的標(biāo)簽輸入框,感興趣的可以了解一下2022-04-04微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08讓div運(yùn)動起來 js實(shí)現(xiàn)緩動效果
讓div運(yùn)動起來,這篇文章主要介紹了js實(shí)現(xiàn)緩動效果的相關(guān)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07javaScript產(chǎn)生隨機(jī)數(shù)的用法小結(jié)
這篇文章主要介紹了javaScript產(chǎn)生隨機(jī)數(shù)的用法小結(jié),包括JavaScript Math.random()內(nèi)置函數(shù) ,Js 隨機(jī)數(shù)產(chǎn)生6位數(shù)字的代碼,需要的朋友可以參考下2018-04-04