{hidden} property update problem


#1

Hi,guys

I’m newbei to ionic and angular.
I use the follow code and try to hide or show a div.
But i found if I changed the {hidden} property,It only take effection after the page got a refresh action.
But I don’t know how to refresh the page in code.

Hope your kindly help.much thanks.

The following is my code
my template: “tpl.html”

<ion-header>
  <ion-navbar> 
  
      <div [hidden]=showhidefavorite >
        <ion-card>收藏夹</ion-card>
      </div>
  </ion-navbar>
</ion-header>


<ion-content  >
 
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content 
        pullingIcon="arrow-dropdown"
      pullingText="pull to refresh"
      refreshingSpinner="circles"
      refreshingText="refreshing..."
        > 
       </ion-refresher-content>
</ion-refresher> 
  <ion-list >
  </ion-list>
</ion-content>

my code: home.ts

onScroll()
  {
      console.log("scroll....");
      this.showhidefavorite = 1;
  }

  doRefresh(refresher)
  {
    console.log("doRefresh");

    setTimeout(()=>{
      this.initializeItems();
      refresher.complete();
      this.showhidefavorite = 0;
    },2000);
  }

#2

Stop using setTimeout().


#3

thx a lot

But i don’t think SetTimeOut is the issue.

Infact, the key is I don’t know how to update the page view in code.

I found the {hidden} property don’t work until the page or view been updated in any situation.


#4

If that’s the case, then you’re updating the backing property in an unusual and unsupported way. If you can provide a complete reproducible code sample (for example, I have no idea how onScroll() is being called), that would be helpful.


#5

Oh man ,really appreciate you!
Here is my code:
And I 'm sure all relative functions were called.and the property’s value had been changed.
It only take effection when the page updated.

“tpl.html”:

<ion-header>
  <ion-navbar >

    <ion-buttons end>
      <button ion-button icon-only  clear  item-right small >
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-segment [(ngModel)]="pet"  mode="md" >
    <ion-segment-button value="kittens" activated >
      全部
    </ion-segment-button>
    <ion-segment-button value="puppies" no-border>
      标签
    </ion-segment-button>
  
  </ion-segment>
      <div [hidden]=showhidefavorite >
        <ion-card>收藏夹</ion-card>
      </div>
  </ion-navbar>
 
<!--  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> -->
</ion-header>

 

<ion-content  >
 
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content 
        pullingIcon="arrow-dropdown"
      pullingText="下拉刷新"
      refreshingSpinner="circles"
      refreshingText="正在刷新..."
        > 
         </ion-refresher-content>
</ion-refresher> 
 
  <ion-list  (ion-scroll)="onScroll()" >
  <!--  <ion-list-header>Follow us on Twitter</ion-list-header>
    -->
    <!--<ion-item *ngFor="let item of items">
      <my-video></my-video>-->
     <!-- <my-component></my-component> -->
     <ion-item *ngFor="let item of items">
     <div  *ngIf="show; then thenBlock; else elseBlock"></div>
       <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
       <ng-template #thenBlock><my-video [item]=item></my-video></ng-template>
     </ion-item>
  <!--  </ion-item> -->

    
  </ion-list>
   <ion-fab right bottom>
    <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
    <ion-fab-list side="left">
      <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
  </ion-fab>
   
  
    

</ion-content>

“Home.ts”:

export class HomePage {

  @ViewChild(Content) content:Content;

  items;
  show:boolean = true;
  showhidefavorite = 0;


  ionViewDidLoad():void{

      this.content.ionScroll.subscribe((event)=>{
       
       console.log("scrolling...");
        this.showhidefavorite = 1;
       // $scope.$apply();
      });

  }

  initializeItems() {
    this.items = [
        'LJSONG',
        'ABC',
        '漫漫长路',
        '起伏不能由我',
        '人海漂泊',
        '尝尽人情淡泊',
        '热情热心',
        '换冷淡冷漠',
        '任多少孤独向寂寞',
        '自在花开花又落',
        '漫漫长路',
        '起伏不能由我',
        '人海漂泊',
        '尝尽人情淡泊',
        '热情热心',
        '换冷淡冷漠',
        '任多少孤独向寂寞',
        '自在花开花又落',
    ]
  }


  constructor(public navCtrl: NavController,menu:MenuController) {
    menu.enable(true);
    this.initializeItems();
    this.show  = true;
  }

  onScroll()
  {
      console.log("scroll....");
      this.showhidefavorite = 1;
  }

  doRefresh(refresher)
  {
    console.log("doRefresh");

    setTimeout(()=>{
      this.initializeItems();
      refresher.complete();
      this.showhidefavorite = 0;
    },2000);
  }


  ngAfterViewInit()
  {
    console.log("ngAfterViewInit");
  }

  


}

#6

I played around a bit with this, and I think even if you get it to work as intended, you won’t be happy with the results. The scroll and scrollEnd events fire so many times even with the mouse still down, that your item will flicker, and if you trigger change detection as scrolling is happening, the page rendering will get janky.

Can you think of an alternate way to present what you’re trying to do?


#7

Hmm…
This is just my test code.
In production envrionment, I will set the condition that the code only execute once.
But I found the [hide] property seems only take effection when the view updated.

Is there any way to update the view in code?


#8

I’m not sure that’s possible. I can’t think of any way to distinguish between the scroll start / scroll end events that are emitted during a scroll interaction and those that actually represent a complete one.


#9

Well,
I 'd like to do like this:

hideFlag:boolean;//when the div visible, this flag was set to false;
and in onscroll function:

onScroll()
  {
      if(hideFlag===false){
           this.hideFlag = true;
           this.showhidefavorite = 1;
      }
     
  }

And I think,on the other way:
Once the div was set to [hidden]=true, the more same actions set the [hidden]=true wouldn’t take the effection?
So the screen won’t flicker.


#10

You only want to hide it? Never show it again? I assumed once scrolling was done, you would want it to reappear. If that’s not the case, wouldn’t it be vastly easier just to take it out of the header? That way it will scroll out of view naturally and you don’t have to worry about any of this.


#11

Well if you can use your function on a button, it clearly works I have a similar function on a button to show/hide some parts of template, loaded from ngmodel binding. So, something is wrong with your code, but can’t put the finger on it :frowning:

After if only the onScroll part bugs, maybe try with angular events, not Ionic ones, aka ngOnInit() instead of IonViewDidLoad()? I have seen issues like that on my own code and on the forums.


#12

My idea is:
I had a ion-card and a ion-list in ion-content.
when I pull-down the ion-refresher update the view and the ion-card will appear.(this works)
when I scroll-up the io-list the ion-card should hide.(this not works).

After many times research and finally I found the issue is :the ion-list won’t update view when scrolling…

If I put the show/hide code in a button click function,it works.

But it not works in scroll event.

Dear rapropos:this is where the scroll event fires.

ionViewDidLoad():void{

      this.content.ionScroll.subscribe((event)=>{
       
       console.log("scrolling...");
        this.showhidefavorite = 1;
       // $scope.$apply();
      });

  }

Not only [hide] property, I tried ngStyle ,and got the same result.


#13

Got it, it’s because the whole code is Ionic 1. And I never coded in ionic 1 sorry. The $scope things are fully deprecated in ionic 2 and 3, sorry. Even {hidden} is deprecated starting ionic 2. You use rather (-hidden) in a class.


#14

Yes ,it works with button.


After many times research and finally I found the issue is :the ion-list won’t update view when scrolling…

If I put the show/hide code in a button click function,it works.

But I need it works with list scroll event or find a proper solution…
:slight_smile:
thx


#15

@junsong i read a tutorial this week about scrolling, that could help you a lot, it was about infinite scroll in ionic, unfortunately i don’t remember the url sorry :frowning:


#16

Thank you!
I am just looking at this!


#17

i’ll check in my history, give me a few minutes


#18

Hi, do you have an update on this issue? To be clear, I have a ‘scroll to top’ fab, that I am using to reset a showFab var to false, and a scrollEnd listener to set it to true when scroll position is > 0 - I could really use a working/consistent hidden property, during ion-list scroll.


#19

try it using ngIf or ngClass.

i.e.

<ion-header>
  <ion-navbar>
      <div *ngIf="showCard" >
        <ion-card>收藏夹</ion-card>
      </div>
  </ion-navbar>
</ion-header>

OR

<ion-header>
  <ion-navbar> 
      <div [ngClass]="{ 'show' : showCard, 'hide': !showCard }" >
        <ion-card>收藏夹</ion-card>
      </div>
  </ion-navbar>
</ion-header>

and in .ts file when you are scrolling just play with the flag showCard.

i.e.

this.content.ionScrollEnd.subscribe((data)=>{
  if (data.scrollTop == 0) {
     this.showCard = false;
  }
});

.scss file

.hide {
   display: none;
}
.show {
   display: block;
}