ionic3项目实战教程 - 第9讲 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()函数实现跳转;

 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：返回按钮配置；

效果图

662292D357307D307E36113FC003DFEF.jpg

作者：IonicBlog
链接：https://www.jianshu.com/p/63e387721aa3