版權(quán)聲明：本文原創(chuàng)，轉(zhuǎn)載請注明出處 http://www.reibang.com/p/d10b766300a7
系列文章：微信小程序自定義組件——模態(tài)框 Modal
寫這個自定義ActionSheet組件钦睡，和自定義modal一樣躁倒，有些開放能力必須綁定在button上洒琢，而我們有時候又會有在底部上拉菜單中實(shí)現(xiàn)轉(zhuǎn)發(fā)功能的需求褐桌，或者別的微信開放能力，小程序原生的ActionSheet依然無法實(shí)現(xiàn)荧嵌，故此組件應(yīng)運(yùn)而生。
安裝
1.使用npm安裝
直接使用小程序開發(fā)工具自帶的構(gòu)建npm啦撮，請按下面幾個步驟引入：
- 確保項(xiàng)目目錄下有package.json文件，已有的跳過這一步
$ npm init
- 安裝
$ npm i wx-miniprogram-actionsheet
在小程序開發(fā)者工具中依次找到并點(diǎn)擊
工具->構(gòu)建npm愉择，構(gòu)建完成后你的項(xiàng)目目錄會多出一個miniprogram_npm目錄织中，請確保項(xiàng)目設(shè)置已勾選使用npm模塊在使用組件的頁面配置json中使用
{
"usingComponents": {
"action-sheet": "wx-miniprogram-actionsheet"
}
}
2.不使用任何構(gòu)建工具的普通小程序安裝
直接拷貝wx-miniprogram-actionsheet倉庫中的miniprogram_dist目錄下的代碼到項(xiàng)目中的放組件的目錄中去，之后使用方法和小程序自定義組件一樣了。同樣需要在頁面配置json中聲明：
{
"usingComponents": {
"action-sheet": "../components/actionsheet/index" // 根據(jù)你的目錄寫
}
}
使用
wxml文件中
<action-sheet actionShow="{{showStatus}}" closeText="關(guān)閉" bind:actionHide="onActionHide">
<!-- slot ActionSheet 菜單項(xiàng) 只能是button 或 navigator -->
<navigator url="/pages/index/index">我是navigator: 回首頁</navigator>
<button bindtap="handleBtn">我是普通按鈕</button>
<button open-type="share">開放能力: 轉(zhuǎn)發(fā)</button>
</action-sheet>
js文件中
// 只列出核心代碼
Page({
data: {
actionStatus: false
},
onActionHide: function () {
console.log('ActionSheet關(guān)閉了')
}
})
菜單項(xiàng)寫進(jìn)<action-sheet></action-sheet>標(biāo)簽里即可搏嗡，菜單項(xiàng) 只能是button 或 navigator。
action-sheet效果
參數(shù)
| 屬性 | 數(shù)據(jù)類型 | 說明 | 選項(xiàng) | 默認(rèn)值 |
|---|---|---|---|---|
| actionShow | Boolean | 組件的初始顯隱狀態(tài) | 必填 | — |
| closeText | String | 取消按鈕的文字 | 選填 | 取消 |
觸發(fā)事件
| eventName | 說明 |
|---|---|
| actionHide | action-sheet組件被關(guān)閉時觸發(fā)的事件，除了點(diǎn)關(guān)閉按鈕會觸發(fā)外蔚润，點(diǎn)其他按鈕都會關(guān)閉組件，都會觸發(fā)該事件烦租，按需使用 |
