目录
[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>
到这里如果有任何问题,请通过文章最下面的联系方式联系我。
完!