码迷,mamicode.com
首页 > 其他好文 > 详细

[ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化

时间:2016-07-29 21:16:14      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

 

目录

 

新闻详情页的用户体验优化(Tabs的显示与隐藏)

[效果图]

技术分享

有两个地方做了优化:

1.进入详情页的时候隐藏tab

2.详情页的图片大小调整

1.进入详情页的时候隐藏tab:

隐藏Tabs的代码记得放到state.go后面,在页面成为活动视图的时候再显示showBar

  $scope.goDetails = function (item) {
            $state.go(‘tab.tab1-details‘, { id: item.id, title: item.title })
            $ionicTabsDelegate.showBar(false);
        }
        $scope.$on(‘$ionicView.beforeEnter‘, function () {
            console.log(‘已经成为活动视图‘);
            $ionicTabsDelegate.showBar(true);
        });

 

2.新闻详情内容里的图片大小调整

在style.css

.message img {
  width: 100%;
}

 

在tab1-details.html中引用

<ion-view title="{{title}}">
   <ion-content class="padding">
        <div class="message" ng-bind-html="item.message"></div>
   </ion-content> 
</ion-view>

到这里如果有任何问题,请通过文章最下面的联系方式联系我。

完!

[ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化

标签:

原文地址:http://www.cnblogs.com/tonge/p/5719552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!