微信小程序自定義組件——底部菜單欄 ActionSheet（附完整DEMO） ...

發表時間：2021-1-5

發布人：葵宇科技

浏覽次數：116

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

安裝

1.使用npm安裝

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

确保項目目錄下(xià)有package.json文(wén)件，已有的跳過這一步

$ npm init

安裝

$ npm i wx-miniprogram-actionsheet

在小程序開發者工具中(zhōng)依次找到并點擊工具->構建npm，構建完成後你(nǐ)的項目目錄會多出一個(gè)miniprogram_npm目錄，請确保項目設置已勾選使用npm模塊
在使用組件的頁面配置json中(zhōng)使用

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

2.不使用任何構建工具的普通(tōng)小程序安裝

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

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

使用

wxml文(wén)件中(zhōng)

<action-sheet actionShow="{{showStatus}}" closeText="關(guān)閉" bind:actionHide="onActionHide">

  <navigator url="/pages/index/index">我是navigator: 回首頁navigator>
  <button bindtap="handleBtn">我是普通(tōng)按鈕button>
  <button open-type="share">開放能力: 轉發button>
action-sheet>

js文(wén)件中(zhōng)

// 隻列出核心代碼
Page({
  data: {
    actionStatus: false
  },
  onActionHide: function () {
    console.log('ActionSheet關(guān)閉了')
  }
})

菜單項寫進标簽裡即可(kě)，菜單項隻能是button 或 navigator。

參數

屬性	數據類型	說明	選項	默認值
actionShow	Boolean	組件的初始顯隐狀态	必填	—
closeText	String	取消按鈕的文(wén)字	選填	取消

觸發事件

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

完整示例Demo：

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

提取碼：7o9u