이오니아 슬라이드 상자에서 수직 스크롤을 얻는 방법

Question

설문지 섹션 사이를 옆으로 스 와이프하고 싶습니다. 각 섹션에는 헤더와 답변 된 질문이 있습니다. 질문에 수직 스크롤을 추가하고 싶지만 작동시키는 법을 알 수는 없습니다. 내 의견은 다음과 같습니다.

<ion-view title="{{vm.title}}"> 
    <ion-slide-box show-pager="true" class="has-header"> 
     <ion-slide ng-repeat="s in vm.sections"> 
      <ion-item class="item-royal"> 
       {{s.Heading}} 
      </ion-item> 
      <ion-scroll> 
       <div class="card" ng-repeat="q in s.Questions"> 
        <div class="item item-divider"> 
         {{q.Text}} 
        </div> 
        <div class="item"> 
         {{q.Answer}} 
        </div> 
       </div> 
      </ion-scroll> 
     </ion-slide> 
    </ion-slide-box> 
</ion-view> 

Answer 1

특정 문제를 해결했지만 다른 것을 생성하는 해결책을 발견했습니다.

이

1. 내가 높이를 지정하지 않으 :

   이

   <ion-scroll style="height:300px"> 
       <div style="height:100%"> 
        <div class="card" ng-repeat="q in s.Questions"> 
         <div class="item item-divider"> 
          {{q.Text}} 
         </div> 
         <div class="item"> 
          {{q.Answer}} 
         </div> 
        </div> 
       </div> 
   </ion-scroll> 
   

   이 두 가지 문제가 발생 : 나는 이온 스크롤로 사업부 및 설정 높이 이온 스크롤에 새로운 사업부를 추가 이온 스크롤의 픽셀 단위 - 창에 남아있는 공간을 채우고 싶습니다.

2. 호출기가 스크롤 창 앞에 나타납니다. 아래에 표시하고 싶습니다.

   <ion-view title="{{vm.title}}"> 
        <ion-slide-box show-pager="true" class="has-header" 
            style="position:absolute; bottom: 0;left: 0;right: 0; "> 
         <ion-slide ng-repeat="s in vm.sections"> 
          <ion-item class="item-royal"> 
           {{s.Heading}} 
          </ion-item> 
          <ion-content> 
           <div class="card" ng-repeat="q in s.Questions"> 
            <div class="item item-divider"> 
             {{q.Text}} 
            </div> 
            <div class="item"> 
             {{q.Answer}} 
            </div> 
           </div> 
          </ion-content> 
         </ion-slide> 
        </ion-slide-box> 
       </ion-view> 
   

   변경이

   1. 가 ion-slide-box (상단 이미 has-header에 의해 지정됩니다 position:absolute; bottom: 0;left: 0;right: 0;의 스타일을 설정했다 : EDIT

   그런 다음 나는 두 번째 해결책을 발견 클래스)

3. ion-scroll 및 div 대신

4. 대신 호출기가있는 부분에서 이온 내용을 사용하십시오. 좋아 보인다!

편집 2 또한 나이가 안드로이드 장치와 스크롤 문제가있는 경우 Crosswalk를 사용하는 것이 좋습니다 것입니다.

Answer 2

이온 2의 경우 <ion-slides>을 사용해야합니다. <ion-slide-box>은 더 이상 사용되지 않습니다.