ionic开发笔记

首先声明，本文不是开发帮助文档，需要具有一定的ionic和AngularJS的基础，主要目的是记录我在开发过程中遇到的一些憋手的问题的解决方式。

 

1.修改导航条中返回按钮的内容

    <body ng-app="starter">
        <ion-nav-bar class="bar-calm">
            <ion-nav-back-button class="button-clear">
                <i class="icon ion-ios-arrow-back"></i>返回
            </ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view name="container"></ion-nav-view>
    </body>

2.修改导航条中标题的样式

    <body ng-app="starter">
        <ion-nav-bar class="bar-calm nav-bar-title">
            <ion-nav-back-button class="button-clear">
                <i class="icon ion-ios-arrow-back"></i>返回
            </ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view name="container"></ion-nav-view>
    </body>

3.给具体的画面中的导航栏添加标题、左右按钮、图片

<ion-view view-title="首页">
    <ion-nav-buttons side="left">
        <div class="b-box children-all-center"><img src="./img/ic-nav-logo.png" style="width: 70px;" /></div>
    </ion-nav-buttons>
    <ion-nav-buttons side="right"><button class="button button-clear" ng-click="goNextPage()">注册</button></ion-nav-buttons>
    <ion-content class="padding">
    </ion-content>
</ion-view>

 注：样式b-box 和 children-all-center是我自己写的让子元素居中的样式，如果不设置，则图片会自动居上显示。

4.通过ui-router的$state完成带参数的页面跳转

　　a、普通字符串参数

　　　　（i）配置$stateProvider.state中的url内容

            .state('home', {
            url: '/home/:userid',
            views: {
                'container': {
                    templateUrl: 'templates/water-curve.html'
                }
            }
        })

　　　　（ii）注入$state对象，通过go方法完成跳转

            app.controller('LogiCtrl', ['$state', fucntion($state) {
                $state.go('home', {
                        userid: 'test'
                });
            }]);

　　　　（iii）通过注入$stateParams对象，完成参数的接收

            var userid = $stateParams.userid;

　　b、JSON对象参数

//基本思路：将json对象转换成String，然后在传递，接收后再转换为json对象
{//发送参数部分示例代码
    var obj = {
        attr1: '123',
        attr2: '456',
        attr3: 1
    };
    var params = JSON.stringify(obj);//将json对象转化为String
}

{//接收参数部分示例代码
    var param= $stateParams.obj;
    var obj= JSON.parse(param);//将String对象转化为json对象
}

　　c、多参数

 url: '/home/:userid/:username'
$state.go('home', {
     userid: 'test',
     username:'测试用户'
});

 

posted @ 2016-06-06 16:53  铭久  阅读(302)  评论(0)  编辑  收藏  举报