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:返回按钮配置;

效果图

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

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


发表评论

电子邮件地址不会被公开。 必填项已用*标注