ionic3 项目中实现分享上拉遮罩的效果

效果如上图所示 

安装

npm i ionic-actionsheet2 --save

ionic-actionsheet2 用于ionic3 的一个组件： 上拉菜单，样式与ionic框架官方给的上拉菜单样式略有不同 ，样式如上。

安装完成之后在项目中使用：

Import In AppModule   （在根模块 app.module.ts 文件中引入）

//app.module.ts 文件中：

import { ActionSheet2Module } from 'ionic-actionsheet2';


//引入依赖
@NgModule({
declarations: [...],
imports: [
 ActionSheet2Module
 ]
})

Use In Template  （在模板中使用，即哪里需要用到就在哪个模板中使用）

我在项目中是在home页面中使用的，所以在home.ts中:

// home.ts 中：

//引入ionic-actionsheet2

import { Actionsheet2controllerProvider } from 'ionic-actionsheet2';

export class HomePage {

 constructor(public navCtrl: NavController, private act2controller: Actionsheet2controllerProvider){  

}
 // 点击显示事件：
 showActionSheet(){

 // 接口和官方发布的接口类似
    this.act2controller.create({
      buttons: [
        {
          text: '微信',
          imgurl:"assets/imgs/my/[email protected]",
          handler: () => {
         
          },
        },
        {
          text: '微信朋友圈',
          imgurl:"assets/imgs/my/[email protected]",
          handler: () => {
      
          },
        },{
          text: 'qq',
          imgurl:"assets/imgs/my/[email protected]",
          handler: () => {
     
          }
        }
        ,{
          text: 'qq空间',
          imgurl:"assets/imgs/my/[email protected]",
          handler: () => {
            
          }
        }
      ]
    })


}

home.html中

 

 

 

 

 

 

转载于:https://my.oschina.net/u/4004643/blog/3048295