Ionic Introductory Tutorial Lesson 11th-Brief description ion-list, Ion-item complete list page Ion-infinite-scroll pull-up load ion-refresher drop-down refresh

Having sent 10 tutorials, I now have fewer friends to ask questions about. Maybe I come into contact with the study ionic just so people!

Perhaps everyone has felt that I write things are too basic, there is nothing worth reference to the place.

At first I was asked to say that I was directly anti-similar hungry, fold 800 of such sites, do a demo.

In fact, I also know that some friends want this online free labor.

But in fact this proposal is still good.

By the time I finish this demo, I might consider looking for a mature on-line project to illustrate.

This list page says that the friends who have finished this can try to take over the project.

I'm not saying Ionic is simple and less content.

I'm just saying that what I've mentioned in my time is enough to get started.

The subsequent study will be more scientific from the beginning of the project.

In fact, I speak a little more, on the basis of the foundation, nothing but MVC, how to interact with the service controller views, how to two-way binding, how to use the ionic tag, how to traverse the array.

Now, let's start our class today.

First, let's take a look at the features that this lesson will achieve:

What we're going to do is a list page like this, first of all we can see that the children in the list page are the same style, but the data is different.

So we just write a style for a subkey, and then iterate through the array of data by using Ng-repeat to get the list page we want.

By analyzing this subkey, we can know that this thing is roughly composed of three parts,

The picture on the left, the middle text description area, the right button.

Check out Ionic's Itemapi and we found a style like this

Photo from: http://www.fed123.com/2014/08/09/2014_ionic_api_css/

Or the principle that I said last time, can use the style of ionic to use the style of ionic first, can knock one line of code less, knock a line less.

Get the data from the server This is not said, the front said a lot.

Basically did not knock what code, finished half of it, and now add a button

So basically all the functions are there, and then based on the CSS to do part of the fine-tuning.

And then in

This is equivalent to (var key in items) {This is all HTML contained in a tag and will be copied}

Well, the interface is not the same as what we want, so manually modify it, paste the code here, see the demo directly.

Next, let's look at the more common, List page additional requirements, pull-up loading, drop-down refreshes.

These two functions are now the default must have, the product manager in writing requirements are not bothered to write to the requirements of the document.

As long as you mention the list page, you must have these two features. Well, some fixed-content list pages don't need to be, when I'm talking nonsense.

First, pull-up loading: This is before </ion-content> , which is the bottom of the interface.

<Ion-infinite-scrollon-infinite="Loadmore ()"distance="1%"ng-if="!NoMore"></Ion-infinite-scroll>

Ng-if refers to the display or hiding of this control.

It is important to note the difference between ng-show and Ng-show, and the ng-hide is to use CSS methods to display and hide the control, which actually exists. Ng-if is the removal and addition. This is fundamentally different from the actual situation, to choose according to the needs of the business, if you need to repeat the high-frequency display hide can consider using ng-show, if hidden after the display is no longer necessary to use ng-if

Distance is the trigger event when the slider (which is the slider of the scroll bar, does not show or exist) is at the bottom of the distance.

On-infinite refers to the triggering event of a binding.

It is important to note that this event will throw the scroll.infinitescrollcomplete event After the response has been processed

Here to expand the description;

$emit can only pass event and Data$broadcast to the parent controller, the event and Data$on can only be passed to the child controller to receive event and data

Detailed can refer to: Http://www.tuicool.com/articles/qIBNve I do not repeat here.

Drop-down refresh is used

<pulling-text=on-refresh="Dorefresh ()"> </ Ion-refresher >
Note that this is placed on<ion-content>Then, the top of the interface. Note and the difference between pull-up loading

Note that at the end of the event response, the Scroll.refreshcomplete event is thrown, which is not the same as the pull-load event.

The content of this lesson is over.

Project Demo Address:Http://pan.baidu.com/s/1c2a48E0
If you have any other questions, you can find me in the following ways
qq:448627663
e-mail:448627663
Sina Weibo: Xiao Hu oni
public Number: ionic__

Ionic Introductory Tutorial Lesson 11th-Brief description ion-list, Ion-item complete list page Ion-infinite-scroll pull-up load ion-refresher drop-down refresh