ionic3 实战(九)应用内主题浏览器ThemeableBrowser的使用

这一讲主要实现商品的"抢购"功能

  • 1.安装ThemeableBrowser插件;

  • 2.使用ThemeableBrowser插件;

1.安装插件

分别执行以下命令:

 ionic cordova plugin add cordova-plugin-themeablebrowser
 npm install --save @ionic-native/themeable-browser`

2.ThemeableBrowser的使用

product-details.html中给"去抢购"button增加(click)="goBuy()"事件; 在product-details.ts增加goBuy()函数实现跳转;

还要配置app.module.ts

import { ThemeableBrowser } from '@ionic-native/themeable-browser';

providers: [

   StatusBar,

   SplashScreen,AppService,

   {provide: ErrorHandler, useClass: IonicErrorHandler},

   ThemeableBrowser

 ]


 goBuy() {
    let options = {
        statusbar: {
            color: '#f8285c'
        },
        toolbar: {
            height: 44,
            color: '#f8285c'
        },
        title: {
            color: '#ffffffff',
            showPageTitle: true
        },
        backButton: {
            image: 'back',
            imagePressed: 'back_pressed',
            align: 'left',
            event: 'backPressed'
        },
        backButtonCanClose: true
    };
    new ThemeableBrowser(this.selectedItem.ClickUrl, '_blank', options)
}

注意,如果引用ThemeableBrowser时出现错误,请安装 npm install ionic-native --save,即可解决。

这里简单介绍下ThemeableBrowser用到的几个属性:

  • statusbar:状态栏的颜色;

  • toolbar:工具栏配置;

  • titll:标题的配置;

  • backButton:返回按钮配置;

效果图

李胜松博客

关于ThemeableBrowser的其他属性,感兴趣的可查阅官方资料:http://ionicframework.com/docs/native/in-app-browser/

具体效果可扫描下方二维码进行查看

李胜松博客





lss博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论