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

目录

• [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令

• [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js

• [ionic开源项目教程] 第3讲 使用Tabs和SlideBox实现左右滑动菜单

• [ionic开源项目教程] 第4讲 通过Service层获取新闻列表

• [ionic开源项目教程] 第5讲 如何在项目中使用全局配置

• [ionic开源项目教程] 第6讲 过滤器filter的使用

• [ionic开源项目教程] 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

• [ionic开源项目教程] 第8讲  根据菜单分类加载数据(重要)

• [ionic开源项目教程] 第9讲 新闻详情页的实现[ionic开源项目教程]

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

• [ionic开源项目教程] 第11讲 封装BaseController实现controller继承
• [ionic开源项目教程] 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装
• ​[ionic开源项目教程] 第13讲 Service层继续优化，提取公用Service，以及生活和农业两大模块的实现

新闻详情页的用户体验优化(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>

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

完！