Question

我正在使用hybrid开发Ionic-3应用程序。我的页面有一个单选按钮和一个复选框，当我滚动页面时，它隐藏了内容，一段时间后它不会显示滚动后的一些单选按钮或复选框。如果我们点击单选按钮的空白区域，它将自动显示。

我附上了一些图片以便更好地理解问题。

滚动时

滚动后

真实页面（滚动前）

HTML

 <ion-header class="custom_headerz">
    <button class="button button-icon button-clear custom_btnz" (click)="back()">
        <img src="assets/imgs/B_arrow.png" alt="" style="height: 20px;">
       </button>
    <div class="usrname">{{username}}</div>
    <button class="button button-icon button-clear custom_btnRz2">
      <img src="assets/imgs/user.png" alt="error" style="width : 100% ; height : 100%">
    </button>
    <button class="button button-icon button-clear custom_btnRz">
      <img src="assets/imgs/logout.png" alt="error" style="width : 30px ; height : 30px" (click)="logout()">
</button>
</ion-header>

<ion-content>
<div class="media_query">
    <ion-card class="cardd">
        <div class="pw_head">Wybierz Pracownika:</div>
        <div class="srow main_row">
           <div class="scol_18 sub_card radiusL vertical_centr">  <img src="assets/imgs/user2.png" alt="error" class="user2"></div>
             <div class="scol sub_cardbg">
                 <div class="srow choose_name" greyclr>{{username}}</div>
                 <div class="srow">
                     <div class="scol_15"><img src="assets/imgs/cc.png" alt="error" class="cc"></div>
                     <div class="scol_85" greyclr>loczasdsdf: <span class="amtspan">{{questionnaire_count}}</span></div>
                 </div> 
             </div>
             <div class="scol_10 sub_cardbg radiusR vertical_centr"><img src="assets/imgs/F_arrow.png" alt="error" class="f_arrow"></div>
         </div>
         <div class="pw_head">Rodzaj treningu:</div>
         <div class="srow main_row" (click)="change_type()">
            <div class="scol_18 sub_card_emp radiusL vertical_centr">  <img src="assets/imgs/done.png" alt="error" class="user2_emp"></div>
              <div class="scolD sub_cardbg vertical_centrD" greyclr>{{task_definition_name}}</div>
              <div class="scol_10 sub_cardbg radiusR vertical_centr"><img src="assets/imgs/F_arrow.png" alt="error" class="f_arrow"></div>
          </div>
     </ion-card>

     <ion-card class="cardd">
        <div class="pw_head">Ankieta:</div>

    <div *ngFor="let x of q_form">
    <div class="srow padding_0 margin_t_10">
        <div class="scol_10 pw_que_title1">{{x.id_task_area_definition}}</div>
        <div class="scol_55 pw_que_title2 vertical_centrD">{{x.tdp_position_description}}</div>
        <div class="scol_35 vertical_centr">
            <ion-item class="pw_ion_check pw_que_title3 font_12">
                <ion-label> type to fill </ion-label>
                <ion-checkbox ></ion-checkbox>
            </ion-item>
        </div>
    </div>

    <div *ngFor="let y of x.tdp_position_inputs">
         <div class="pw_head pw_question">
             <span style="font-weight:500;color: black">{{y.id_tdpv}})</span> {{y.tdpv_label}}
         </div>
         <div class="sel_ans">Wybierz</div>

         <div *ngFor="let z of dataSplit(y.tdpv_input_value_options)">
         <ion-list radio-group *ngIf="y.tdpv_input_type == 'radio'" [(ngModel)]="y.id_tdp">
            <ion-item class="pw_ion_check" >
                <ion-label class="pw_lable">{{z}}</ion-label>
                <ion-radio item-left class="pw_r_margin"></ion-radio>
            </ion-item>
        </ion-list>
        </div>

        <div *ngIf="y.tdpv_input_type == 'check'">
        <ion-item class="pw_ion_check" *ngFor="let z of dataSplit(y.tdpv_input_value_options)">
            <ion-label>{{z}}</ion-label>
            <ion-checkbox [(ngModel)]="ans1B1"></ion-checkbox>
        </ion-item>
        </div>

        <div *ngIf="y.tdpv_input_type == 'price'">
            <input class="pw_input ht_50" type="number" placeholder="Price">
        </div>
        <hr class="pw_hr">
    </div>
    </div>

 <textarea rows="4" cols="50" class="pw_input" placeholder="text text"></textarea>

        <button ion-button class="pw_submit_btn">Wyslik</button>
    </ion-card>
     </div>
</ion-content>

SCSS

page-training {
 .custom_headerz{
     height: 56px !important;
     background-color: transparent;
     color: #fff;
     text-align: center;
     line-height: 56px;
     font-size: 20px;
     background-color: #c91025;
}
 .custom_btnz{
     position: absolute;
     background-color: transparent;
     font-size: 25px;
     float: left;
     margin: 10px 0px;
     left: 0;
     color: white;
     bottom: 0;
     line-height: 30px;
     width: 50px;
     z-index: 5000000;
     padding: 0;
}
 .custom_btnRz{
     position: absolute;
     background-color: transparent;
     font-size: 25px;
     float: left;
     margin: 5px 0px;
     right: 0;
     color: white;
     bottom: 0;
     line-height: 30px;
     z-index: 5000;
     width: 50px;
     padding: 0;
     height: 40px;
}
 .custom_btnRz2{
     position: absolute;
     background-color: #fff;
     font-size: 25px;
     float: left;
     right: 0;
     color: white;
     bottom: 0;
     line-height: 30px;
     z-index: 5000;
     height: 35px;
     width: 35px;
     border-radius: 50%;
     padding: 1px;
     margin: 10px;
     margin-right: 50px;
}
 .amtspan,.choose_name,.pw_que_title1,.sel_ans{
     font-weight:500 
}
 .sub_cardbg{
     background-color:#EDEDED;
     padding:0 5px;
     font-size:13px 
}
 .sub_card{
     background-color:#393939 
}
 .sub_card_emp{
     background-color:#EDEDED 
}
 .radiusL{
     border-radius:10px 0 0 10px 
}
 .radiusR{
     border-radius:0 10px 10px 0 
}
 .user2,.user2_emp{
     width:35px;
     height:35px;
     margin:auto;
     border-radius:50%;
     background-color:#fff 
}
 .user2_emp{
     padding:7px 
}
 .f_arrow{
     height:20px;
     width:20px 
}
 .cc{
     height:22px;
     width:22px 
}
 .choose_name{
     padding-bottom:0;
     margin-top:5px 
}
 [greyclr]{
     color:grey 
}
 .amtspan{
     color:#c91025 
}
 .main_row{
     padding:0;
     margin:10px 0;
     min-height:58px 
}
 .scolD{
     -webkit-box-flex:1;
     -webkit-flex:1;
     -moz-box-flex:1;
     -moz-flex:1;
     -ms-flex:1;
     flex:1;
     padding:5px;
     width:100% 
}
 .vertical_centrD{
     display:-webkit-box;
     display:-ms-flexbox;
     display:-webkit-flex;
     display:flex;
     -webkit-box-pack:center;
     -ms-flex-pack:center;
     -webkit-justify-content:center;
     justify-content:left;
     -webkit-box-align:center;
     -ms-flex-align:center;
     -webkit-align-items:center;
     align-items:center 
}
 .pw_padd{
     padding:0 5px 
}
 .pw_que_title1{
     background-color:#393939;
     color:#fff;
     text-align:center;
     font-size:18px;
     height:35px;
     line-height:35px;
     border-radius:10px 0 0 10px 
}
 .pw_que_title2,.pw_que_title3{
     padding:0 10px;
     font-size:12px;
     color:#424242;
     height:35px;
     background-color:#ededed;
}
 .pw_que_title2S{
     line-height: 18px;
     padding: 0 10px;
     font-size: 13px;
     color: #424242;
     height: 35px;
     background-color: #ededed;
}
 .pw_que_title3{
     border-radius:0 10px 10px 0 
}
 .pw_question{
     color:grey;
     font-size:14px;
     line-height:20px 
}
 .sel_ans{
     padding:5px 
}
 .pw_radio{
     color:grey;
     font-size:13px;
     margin:10px 5px 
}
 .pw_r_margin{
     margin-right:5px 
}
 .pw_hr{
     margin:20px 0 
}
 .pw_star{
     color:#c91025;
     font-size:30px;
     text-align:right;
     padding:0;
     height:40px;
     line-height:40px 
}
 .rate_star{
     float:left;
     font-size:13px;
     color:grey;
     padding-left:10px 
}
 .pw_input{
     width:100%;
     margin:15px 0;
     border:none;
     background-color:#ededed;
     height:80px;
     border-radius:10px;
     padding:10px;
     font-size:13px;
     color:grey 
}
 .pw_submit_btn,.pw_submit_btn:active{
     display:table;
     margin:20px auto 30px;
     width:45%;
     height:45px;
     border-radius:8px;
     font-size:13px 
}
 .pw_submit_btn{
     background-color:#c91025 
}
 .pw_submit_btn:active{
     background-color:#e0122a 
}
 .pw_ion_check{
     padding:0;
     color:grey;
     font-size:14px;
     min-height:20px 
}
 .item-md .radio-md,.item.item-md .checkbox-md{
     margin:5px!important 
}
 .item-ios .radio-ios,.item.item-ios .checkbox-ios{
     margin:5px!important 
}
 .header-ios{
     padding-top: 10px;
     height: 66px !important;
}
 .cardd {
     padding: 5px 10px;
     border-radius: 10px;
     -webkit-box-shadow: 0 2px 2px 0 transparent, 0 0px 0px 0px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     box-shadow: 0 2px 2px 0 transparent, 0 0px 0px 0px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     width: 95%;
     margin: auto;
     margin-top: 10px;
     margin-bottom: 10px;
}
 .font_12{
     line-height: 19px;
}
 .pw_lable{
     white-space: pre-line 
}

}

TS

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';

import { AlertProvider } from '../../providers/alert/alert';

@IonicPage()

@Component({
  selector: 'page-training',
  templateUrl: 'training.html',
})

export class TrainingPage {


  options: any[];
  q_form: any;
  questionnaire_count: any;
  task_definition_name: any;
  username: any;
  myRating: any;

  constructor(public navCtrl: NavController, public navParams: NavParams,public modalCtrl: ModalController,public alert: AlertProvider) {
    this.myRating=1
    this.options=[]
  }


  ionViewDidLoad() {

    console.log('ionViewDidLoad TrainingPage');
    this.username=JSON.parse(localStorage.getItem("PWA_user_data")).username

    this.task_definition_name=JSON.parse(localStorage.getItem("PWA_taskdata")).task_definition_name

    this.questionnaire_count=JSON.parse(localStorage.getItem("PWA_activeuser")).questionnaire_count

    this.q_form=JSON.parse(localStorage.getItem("PWA_taskdata")).task_definition_positions

    console.log(this.q_form)

  }


  dataSplit(data) {

      this.options = data.split(";");
      return this.options;

  }


  rating(data){

    this.myRating=data

  }

  back(){

    this.navCtrl.pop();

  }

  logout(){

    this.alert.ConfirmAlert()
    .then((results) =>this.handlelogout(results));

  }

  handlelogout(results){

    if(results=='Logout'){
      localStorage.setItem('PWA_user_login','false');
      this.navCtrl.setRoot("LoginPage")   
    }else{
      this.alert.showAlert("Error","Something went wrong!")
    }

  }


  change_type(){

    let profileModal = this.modalCtrl.create('ChangeTypePage');
    profileModal.present();

  }


}

滚动隐藏了页面内容

0 个答案: