[Ionic Open source Project Tutorial]-10th News Detail Page User experience optimization

Directory

• [Ionic Open source Project Tutorial] 1th Preface, Technical Reserve, Environment building, common command

• [Ionic Open source Project Tutorial] 2nd new Project, architecture page, configuration app.js and Controllers.js

• [Ionic Open Source Project Tutorial] 3rd talk about using tabs and Slidebox to implement left and right sliding menu

• [Ionic Open source Project Tutorial] 4th. Get news list through service layer

• [Ionic Open source Project Tutorial] 5th how to use global configuration in a project

• [Ionic Open source Project Tutorial] 6th talk about the use of filter filters

• [Ionic Open source Project Tutorial] 7th implementation Pull-up refresh pull-up load ion-refresher and Ion-infinite-scroll

• [Ionic Open Source Project Tutorial] 8th talk about loading data according to the menu category (important)

• [Ionic Open source Project Tutorial] 9th the implementation of the News detail page [Ionic open source Project Tutorial]

• [Ionic Open source Project Tutorial] 10th talk about the user experience optimization of the News detail page

• [Ionic Open source Project Tutorial] 11th Lecture Package Basecontroller Implement controller inheritance
• [Ionic Open source Project Tutorial] 12th, the implementation of the Medical module and service layer Loadmore and Dorefresh extraction Package
• ? [Ionic Open source Project Tutorial] 13th, service layer continued optimization, extraction of public service, and life and agriculture two modules of the implementation

User experience optimization for the News Details page (tabs display and hide)

[]

There are two places that have been optimized:

1. Hide tab When entering the details page

2. Picture resizing on the details page

1. Hide tab When entering the details page:

The code that hides the tabs is remembered to be placed behind the state.go and then displayed when the page becomes the active view Showbar

  function (item) {            $state. Go (' tab.tab1-details ', {id:item.id, title:item.title})            $ Ionictabsdelegate.showbar (false);        }        $scope. $on (function  () {            console.log (' has become the active view ');            $ionicTabsDelegate. Showbar (true);        });

2. Picture size adjustment in the news detail content

In Style.css

{  width: 100%;}

Referencing in tab1-details.html

<Ion-viewtitle= "{{title}}">   <ion-contentclass= "padding">        <Divclass= "message"ng-bind-html= "Item.message"></Div>   </ion-content> </Ion-view>

If you have any questions, please contact me by contacting us at the bottom of the article.

Finish!

[Ionic Open source Project Tutorial]-10th News Detail Page User experience optimization