ionic开发中的一些坑(持续更新中。。。)

Question

ionic开发中的一些坑(持续更新中。。。)

ychow opened this issue 10 years ago · 37 comments

如果app有使用tabs，那么在真机上运行时，有的android手机tabs跑到了顶部，而在ios或者ipad上tabs还是在底部的，这是因为1.3.2以后版本默认是使用了以ios为模型的，如果想在android上tabs也是显示在底部，添加以下代码即可：

// 在app.js里面添加
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
  $ionicConfigProvider.platform.android.tabs.position("bottom");
  $ionicConfigProvider.tabs.style('standard');
});

在把ionic升级到1.3.2版本以后，默认的返回按钮都是带有"text"属性的，之前的版本在index.html中统一配置返回按钮样式取消"text"属性不起作用了，如果想要取消，添加以下代码即可：

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
  $ionicConfigProvider.backButton.text('').icon('ion-ios7-arrow-thin-left');
  $ionicConfigProvider.backButton.previousTitleText(false);
  $ionicConfigProvider.navBar.alignTitle('center');
});

最近遇到了一个问题，其实这问题导致的原因还是因为自己没有把 Ionic 的文档仔细看过。在 IONIC beta.14 版本中，Ionic 团队增加了视图缓存。那什么是视图缓存呢？
之前用户一旦在应用程序中执行导航动作,每个退出的视图元素和scope都会被销毁.如果相同的视图再次被访问,应用程序会重新生成元素.现在,视图可以被缓存以提高性能。
现在,当一个视图退出之后,元素将被遗留在DOM中,它的scope在这段时间内会被断开.当导航至一个已经被缓存的视图中,它的scope会被重新链接,并且其遗留在DOM中的元素会被重新激活到当前视图。

但是在实际开发中，有时候这其实是一个坑！还好 Ionic 为开发者提供了一个配置选项，你可以在你的路由里添加 ** cache: false**来禁止视图缓存。当然个别的ionView可以通过设置cache-view=”false”属性。你也可以查看详细的文档 ----> ionNavView/

最近使用了slide-box做了一个幻灯片。当然图片也是ajax取的，所以这里大家就会遇到一个问题，当你使用ng-repeat循环的时候，发现宽度为0！不要惊慌！Ionic里面已经有了相关的解决方案 --> $ionicSlideBoxDelegate

$timeout( function() {
    $ionicSlideBoxDelegate.update();
}, 50);

当我们想让我们应用的tabs在底部，让标题居中的时候，我们可以在config里面添加如下几句：

$ionicConfigProvider.navBar.alignTitle("center");
$ionicConfigProvider.platform.android.tabs.position("bottom");
$ionicConfigProvider.tabs.style("standard);

关于IOS9下ionic应用的Bug解决方案！

如果你是Web应用(浏览器访问的网站)，那么你一定会遇到过在ios9下，点击会乱跳，或是链接失效的Bug。其实仔细观看ionic官方blog，ionic团队已经给出了对应的解决方案！更新你的ionic版本！

使用bower下载最新的ionic版本，替换掉之前使用的ionic.bundle.js!
bower install driftyco/ionic-bower#master

Answer 1 · 2015-04-08T06:19:35.000Z

add the bug about Slide-Box

Answer 2 · 2015-07-03T07:59:53.000Z

还有$scope并不能给view-title赋值！

Answer 3 · 2015-07-03T08:01:37.000Z

@dongnaebi 有例子吗？这种应该可以的

Answer 4 · 2015-07-03T08:12:01.000Z

出现在切换视图的时候，比如列表页进详细页

.......

请求结束后其他地方都渲染了，就这里没变。
如果直接在详细页刷新是会变的

Answer 5 · 2015-07-03T08:13:06.000Z

@dongnaebi 绑定数据的时候最好是对象绑定。试试吧

Answer 6 · 2015-09-28T07:48:17.000Z

还有在Android中为什么cancleButton不可见呢？ios中就是可见的。我初学，好多都还没搞明白

Answer 7 · 2015-09-28T07:51:11.000Z

@floraluo cancelButton??? 有demo吗？或者该button的代码

Answer 8 · 2015-10-10T02:52:36.000Z

$scope.actionsheet=function(){
        $ionicActionSheet.show({
            buttons:[
                { text: "分享"}
            ],
            destructiveText: "删除",
            destructiveButtonClicked: function(){
                console.log("destructiveText is triggle");
                return true;
            },
            cancelText: "取消",   //好像在Android中这个是被隐藏的
            cancle: function(){
                console.log('cancle is triggle');
            },
            buttonClicked: function(index){
                console.log(index)
                return true;
            }
        })
    };

基本是官网的代码
@ychow

Answer 9 · 2015-10-11T07:39:38.000Z

@floraluo 样式的问题

Answer 10 · 2015-11-10T02:07:14.000Z

哥们，这教程还更新么

Answer 11 · 2015-11-10T02:15:13.000Z

@berial 如果遇到ionic的什么坑可以在下面回复。你指的教程是指ionic中文指南这个吗？如果您觉得还缺什么，可以告诉我。

Answer 12 · 2015-11-10T02:20:56.000Z

@ychow 直接往$scope上绑定表单数据的时候，有可能在controller中会取不到值，但是用js的document就可以

Answer 13 · 2015-11-10T02:21:49.000Z

@berial 你是用对象绑定的方式，还是变量绑定。最好使用对象绑定的方式！

Answer 14 · 2015-11-10T02:23:29.000Z

@ychow 之前用的变量绑定，发现不行听别人的建议改成了对象绑定，但是为什么变量绑定会取不到值呢

Answer 15 · 2015-11-10T02:36:03.000Z

@berial 这是js本身的问题了。js对象是存的内存地址。变量是直接存的内存

Answer 16 · 2015-11-10T02:38:33.000Z

谢谢了，刚接触ionic，看网上的教程里都是直接绑定的变量，没想到会出问题。

Answer 17 · 2015-11-10T02:39:40.000Z

@berial 网上的教程都是速成。最好的学习方式就是直接看官方文档。ionic的文档写得还是不错的

Answer 18 · 2015-11-10T02:42:06.000Z

@ychow 我是做Android的，但公司让我接手一个ionic的项目，给的时间很少，只能求个速成，文档还是在看，不过英文太烂，看起来比较吃力。

Answer 19 · 2015-11-10T02:43:05.000Z

@berial 加油

Answer 20 · 2015-11-14T07:09:23.000Z

哥们，我在上拉加载更多的ion-infinite-scroll 加了 immediate-check='false' 属性，页面显示的时候还是会默认加载一次，这是什么问题

Answer 21 · 2015-11-16T03:42:58.000Z

@berial 啥意思最好有代码或是效果图

Answer 22 · 2015-11-16T04:01:10.000Z

@ychow 不用了，改好了

Answer 23 · 2015-12-02T03:11:45.000Z

ios用header-bar自己写的头都有问题

Answer 24 · 2015-12-02T03:15:29.000Z

@MissSui
1、是bar-header吗？具体有什么问题呢？我们也用过没有发现它有啥问题。
2、关于slidebox的这个问题具体是什么意思？没有看明白

Answer 25 · 2015-12-07T12:36:08.000Z

1.头部问题：在ios系统和android中自定义的头会有问题，尤其是加了logo之后，但是这个可以通过控制样式来改变
2.slidebox做轮播图的时候循环会有问题

Answer 26 · 2015-12-09T07:47:18.000Z

循环应该没有问题。加上参数就行了

Answer 27 · 2015-12-14T08:01:18.000Z

之前楼上说的那个ActionSheet的样式问题有没有好的解决办法？

Answer 28 · 2015-12-21T02:27:28.000Z

@lllang 在配置里面统一下就行了

Answer 29 · 2016-01-21T06:59:28.000Z

用ionic开发的应用，当页面超出一屏即当页有上下滚动条时，在苹果手机上点击输入框时，键盘弹出时，页面的头部会向下移动一下再回到顶部，即出现头部跳一下的情况，这种情况有解决方案么？谢谢！

Answer 30 · 2016-01-21T07:18:00.000Z

@andymiao858 ionic-team/ionic-framework#2285 看看这里貌似是你要的

Answer 31 · 2016-01-21T07:33:19.000Z

iOS上有的时候在软键盘右上方会出现一个英文的"DONE",如何改成中文的。。

Answer 32 · 2016-01-21T09:54:39.000Z

@berial 这个前端恐怕控制不了。。。

Answer 33 · 2016-01-21T09:55:06.000Z

@berial 除非是Hybrid APP 应该可以自定义软键盘

Answer 34 · 2016-05-16T02:45:35.000Z

把输入框input定位在最下边，ios 输入框获取到焦点弹出键盘后会导致整个内容页顶上去；有好的解决办法吗？

Answer 35 · 2016-09-29T07:31:05.000Z

使用背景图片，然后在里面布局input，input输入的时候会把真个背景图顶上去。。。怎么破！求助

Answer 36 · 2017-03-21T10:53:12.000Z

页面的内容区域是引的iframe 单页跳转导航栏的返回按钮怎么实现在首页的情况下隐藏（单页内跳转 URL不变）

Answer 37 · 2017-03-22T05:36:36.000Z

@aamis520 加一个ng-if。判断下。