欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序自定義組件——底部菜單欄 ActionSheet（附完整DEMO） ... - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營(yíng)銷的便利，運(yùn)營(yíng)的高效，讓網(wǎng)站成為營(yíng)銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

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

發(fā)表時(shí)間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：188

寫這個(gè)自定義ActionSheet組件，和自定義modal一樣，有些開放能力必須綁定在button上，而我們有時(shí)候又會(huì)有在底部上拉菜單中實(shí)現(xiàn)轉(zhuǎn)發(fā)功能的需求，或者別的微信開放能力，小程序原生的ActionSheet依然無法實(shí)現(xiàn)，故此組件應(yīng)運(yùn)而生。

安裝

1.使用npm安裝

直接使用小程序開發(fā)工具自帶的構(gòu)建npm，請(qǐng)按下面幾個(gè)步驟引入：

確保項(xiàng)目目錄下有package.json文件，已有的跳過這一步

$ npm init

安裝

$ npm i wx-miniprogram-actionsheet

在小程序開發(fā)者工具中依次找到并點(diǎn)擊工具->構(gòu)建npm，構(gòu)建完成后你的項(xiàng)目目錄會(huì)多出一個(gè)miniprogram_npm目錄，請(qǐng)確保項(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">

  <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)標(biāo)簽里即可，菜單項(xiàng) 只能是button 或 navigator。

參數(shù)

屬性	數(shù)據(jù)類型	說明	選項(xiàng)	默認(rèn)值
actionShow	Boolean	組件的初始顯隱狀態(tài)	必填	—
closeText	String	取消按鈕的文字	選填	取消

觸發(fā)事件

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

完整示例Demo：

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

提取碼：7o9u