微信小程序自定義組件——底部菜單欄 ActionSheet

https://www.jianshu.com/p/d10b766300a7

寫這個自定義ActionSheet組件，和自定義modal一樣，有些開放能力必須綁定在button上，而我們有時候又會有在底部上拉菜單中實現轉發功能的需求，或者別的微信開放能力，小程序原生的ActionSheet依然無法實現，故此組件應運而生。

安裝

1.使用npm安裝

直接使用小程序開發工具自帶的構建npm，請按下面幾個步驟引入：

• 確保項目目錄下有package.json文件，已有的跳過這一步

$ npm init

　　

• 安裝

$ npm i wx-miniprogram-actionsheet

　　

• 在小程序開發者工具中依次找到並點擊工具->構建npm，構建完成后你的項目目錄會多出一個miniprogram_npm目錄，請確保項目設置已勾選使用npm模塊

• 在使用組件的頁面配置json中使用

{
  "usingComponents": {
    "action-sheet": "wx-miniprogram-actionsheet"
  }
}

　　

2.不使用任何構建工具的普通小程序安裝

直接拷貝wx-miniprogram-actionsheet倉庫中的miniprogram_dist目錄下的代碼到項目中的放組件的目錄中去，之后使用方法和小程序自定義組件一樣了。同樣需要在頁面配置json中聲明：

{
  "usingComponents": {
    "action-sheet": "../components/actionsheet/index" // 根據你的目錄寫
  }
}

　　

使用

wxml文件中

<action-sheet actionShow="{{showStatus}}" closeText="關閉" bind:actionHide="onActionHide">
  <!-- slot ActionSheet 菜單項 只能是button 或 navigator -->
  <navigator url="/pages/index/index">我是navigator: 回首頁</navigator>
  <button bindtap="handleBtn">我是普通按鈕</button>
  <button open-type="share">開放能力: 轉發</button>
</action-sheet>

 

js文件中

// 只列出核心代碼
Page({
  data: {
    actionStatus: false
  },
  onActionHide: function () {
    console.log('ActionSheet關閉了')
  }
})
菜單項寫進<action-sheet></action-sheet>標簽里即可，菜單項 只能是button 或 navigator。

 

 

 

action-sheet效果

 

 

參數

屬性	數據類型	說明	選項	默認值
actionShow	Boolean	組件的初始顯隱狀態	必填	—
closeText	String	取消按鈕的文字	選填	取消

觸發事件

eventName	說明
actionHide	action-sheet組件被關閉時觸發的事件，除了點關閉按鈕會觸發外，點其他按鈕都會關閉組件，都會觸發該事件，按需使用

示例Demo

微信小程序自定義組件使用示例整合

作者：一個沒有感情的蘿菠頭
鏈接：https://www.jianshu.com/p/d10b766300a7
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。