分享一个自己做的ionic3中的组件，类似于上拉菜单

最新推荐文章于 2020-10-13 18:59:53 发布

猛码象

最新推荐文章于 2020-10-13 18:59:53 发布

阅读量696

点赞数

CC 4.0 BY-SA版权

文章标签： ionic3 angular 上拉菜单 actionsheet

本文链接：https://blog.youkuaiyun.com/weixin_41879988/article/details/81699094

本文介绍了一个基于Ionic框架的自定义ActionSheet组件，该组件为开源项目并提供丰富的按钮配置选项，如文本、图标及回调函数等。通过简单的安装步骤和模块导入即可在项目中使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上图~

这是我自己写的一个用于分享的开源组件

github地址：https://github.com/yangkaixuan/ionic-actionsheet2

安装

npm i ionic-actionsheet2 --save

Import In AppModule

import { ActionSheet2Module } from 'ionic-actionsheet2';

@NgModule({
  declarations: [
  ],
  imports: [
   ActionSheet2Module
  ]
})

Use In Templete

import { Actionsheet2controllerProvider } from 'ionic-actionsheet2';

  constructor(private act2controller :Actionsheet2controllerProvider) {
    
  }

接口于官方发布的接口类似

 this.act2controller.create({
      buttons: [
        {
          text: '微信',
          imgurl:"assets/imgs/weixinpic.png",
          handler: () => {
         
          },
        },
        {
          text: '微信朋友圈',
          imgurl:"assets/imgs/weixinzone.png",
          handler: () => {
      
          },
        },{
          text: 'qq',
          imgurl:"assets/imgs/qq.png",
          handler: () => {
     
          }
        }
        ,{
          text: 'qq空间',
          imgurl:"assets/imgs/qqzone.png",
          handler: () => {
            
          }
        }
      ]
    })