步驟一:新建一個component的文件夾,用來放所有的自定義組件;
步驟二:在該目錄下新建一個prompt的文件夾,用來放prompt組件;
步驟三:右擊–>新建–>component
成都創新互聯長期為超過千家客戶提供的網站建設服務,團隊從業經驗10年,關注不同地域、不同群體,并針對不同對象提供差異化的產品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯網生態環境。為錦州企業提供專業的成都網站制作、做網站、外貿營銷網站建設,錦州網站改版等技術服務。擁有10余年豐富建站經驗和眾多成功案例,為您定制開發。

直接上代碼
wxml
<view class="prompt-box" hidden="{{isHidden}}">
<view class="prompt-content contentFontColor">
<view class="prompt-title">{{title}}</view>
<input class="prompt-input" type="digit" bindinput="_input" value="{{cost}}" />
<view class="prompt-btn-group">
<button class="btn-item prompt-cancel-btn contentFontColor" bind:tap="_cancel">{{btn_cancel}}</button>
<button class="btn-item prompt-certain-btn" bind:tap="_confirm">{{btn_certain}}</button>
</view>
</view>
</view>js
// components/prompt/prompt.js
Component({
options: {
multipleSlots: true // 在組件定義時的選項中啟用多slot支持
},
/**
* 組件的屬性列表
*/
properties: {
title: {
type: String,
value: '標題'
},
btn_cancel: {
type: String,
value: '取消'
},
btn_certain: {
type: String,
value: '確定'
}
},
data: {
isHidden: true,
},
methods: {
hidePrompt: function () {
this.setData({
isHidden: true
})
},
showPrompt () {
this.setData({
isHidden: false
})
},
/*
* 內部私有方法建議以下劃線開頭
* triggerEvent 用于觸發事件
*/
_cancel () {
//觸發cancel事件,即在外部,在組件上綁定cancel事件即可,bind:cancel,像綁定tap一樣
this.triggerEvent("cancel")
},
_confirm () {
this.triggerEvent("confirm");
},
_input(e){
//將參數傳出去,這樣在getInput函數中可以通過e去獲得必要的參數
this.triggerEvent("getInput",e.detail);
}
}
})json
{
"component": true,
"usingComponents": {}
}wxss
/* components/vas-prompt/vas-prompt.wxss */
.prompt-box {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 11;
background: rgba(0, 0, 0, .5);
}
.prompt-content {
position: absolute;
left: 50%;
top: 40%;
width: 80%;
max-width: 600rpx;
border: 2rpx solid #ccc;
border-radius: 10rpx;
box-sizing: bordre-box;
transform: translate(-50%, -50%);
overflow: hidden;
background: #fff;
}
.prompt-title {
width: 100%;
padding: 20rpx;
text-align: center;
font-size: 40rpx;
border-bottom: 2rpx solid gray;
}
.prompt-input{
margin: 8%;
padding: 10rpx 15rpx;
width: 80%;
height:85rpx;
border: 1px solid #ccc;
border-radius: 10rpx;
}
.prompt-btn-group{
display: flex;
}
.btn-item {
width: 35%;
margin-bottom: 20rpx;
height: 100rpx;
line-height: 100rpx;
background-color: white;
justify-content: space-around;
}
.prompt-certain-btn{
color: white;
background-color: #4FEBDE;
}
.prompt-cancel-btn{
border: 1px solid #4FEBDE;
}
.contentFontColor {
color: #868686;
}
使用
例如,在index.html中使用
在json中添加useComponents屬性
"usingComponents": {
"vas-prompt": "./components/prompt/prompt"
}wxml
<prompt id="prompt" title='test' btn_certain='確定' bind:getInput="getInput" bind:cancel="cancel" bind:confirm="confirm"> </prompt> <button bindtap="showPrompt">點擊彈出prompt</button>
js
//在onReady生命周期函數中,先獲取prompt實例
onReady:function(){
this.prompt = this.selectComponent("#prompt");
},
//顯示prompt
showPrompt:function(){
this.prompt.showPrompt();
},
//將輸入的value保存起來
getInput: function (e) {
this.setData({
value: e.detail.value
})
},
confirm: function () {
let _cost = this.data.value;
if (_cost == '') {
console.log('你還未輸入');
return;
}
else{
....
}
},
cancel: function () {
this.prompt.hidePrompt();
},原理:
將prompt隱藏起來,點擊顯示的時候則顯示,然后通過原生的tap事件,觸發自定義事件,在使用該組件的時候,則使用自定義事件.
總結
以上所述是小編給大家介紹的微信小程序自定義prompt組件步驟詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持!
網站欄目:微信小程序自定義prompt組件步驟詳解
標題路徑:http://m.kartarina.com/article12/gciegc.html
成都網站建設公司_創新互聯,為您提供品牌網站設計、App開發、企業網站制作、面包屑導航、企業建站、服務器托管
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯