ionic3项目实战教程 - 第9讲 ionic3应用内主题浏览器ThemeableBrowser的使用

  1. 云栖社区>
  2. 博客>
  3. 正文

ionic3项目实战教程 - 第9讲 ionic3应用内主题浏览器ThemeableBrowser的使用

tonge 2017-08-23 22:25:00 浏览1039
展开阅读全文

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

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

效果图

img_662292d357307d307e36113fc003dfef.jpe
662292D357307D307E36113FC003DFEF.jpg

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

完!

网友评论

登录后评论
0/500
评论
tonge
+ 关注