目录
[ionic开源项目教程] 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
- [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>
到这里如果有任何问题，请通过文章最下面的联系方式联系我。
完！