滾動視圖鈦的問題？

Question

我有一個表格，有10個問題與評級欄。我需要在同一頁面顯示10個問題。這些問題不適合屏幕顯示，因此我需要進行垂直滾動，並且應該能夠在同一頁面查看10個問題。我嘗試了很多方法但它不工作。請幫助我垂直滾動視圖？

視圖

<Alloy> 
    <Window id="questionnaireWin" title="questionnaire" platform="android,ios"> 

     <View id="header"> 
       <Label id="title">questions form</Label> 
     </View> 
     <ScrollView showHorizontalScrollIndicator="true" id="Scroll" layout="vertical"> 

     <View class="questionsContainer"> 
      <View class="row"> 
       <Label class="question">1. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label> 
       <Require type="widget" src="starrating" class="starRating" id="starR1" max='5' initialRating='2.5'></Require> 
      </View> 
      <View class="row"> 
       <Label class="question">2. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf </Label> 
       <Require type="widget" src="starrating" class="starRating" id="starR2" max='5' initialRating='3'></Require> 
      </View> 
      <View class="row"> 
       <Label class="question">3. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label> 
       <Require type="widget" src="starrating" class="starRating" id="starR3" max='5' initialRating='2'></Require> 
      </View> 
      <View class="row"> 
       <Label class="question">4. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label> 
       <Require type="widget" src="starrating" class="starRating" id="starR4" max='5' initialRating='3.5'></Require> 
      </View> 
      <View class="row"> 
       <Label class="question">5. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf </Label> 
       <Require type="widget" src="starrating" class="starRating" id="starR5" max='5' initialRating='2.5'></Require> 
      </View> 
      <View class="row"> 
       <Label class="question">6. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label> 
       <Require type="widget" src="starrating" class="starRating" id="starR6" max='5' initialRating='3'></Require> 
      </View> 
      <View class="row"> 
       <Label class="question">7. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label> 
       <Require type="widget" src="starrating" class="starRating" id="starR7" max='5' initialRating='2'></Require> 
      </View> 
      <View class="row"> 
       <Label class="question">8. HThis ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf? </Label> 
       <Require type="widget" src="starrating" class="starRating" id="starR8" max='5' initialRating='3.5'></Require> 
      </View> 
      <View class="row"> 
       <Label class="question">9. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf </Label> 
       <Require type="widget" src="starrating" class="starRating" id="starR9" max='5' initialRating='2'></Require> 
      </View> 
      <View class="row"> 
       <Label class="question">10. vThis ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label> 
       <Require type="widget" src="starrating" class="starRating" id="starR10" max='5' initialRating='3.5'></Require> 
      </View> 

      <View class="row"> 
       <Button class="processRating">Procees</Button> 
      </View> 
     </View> 
     </ScrollView> 
    </Window> 
</Alloy> 

而且款式代碼是上述觀點如下，

"#questionnaireWin": { 
    layout: 'vertical', 
    fullscreen: false, 
    navBarHidden: true 
} 

"#header": { 
    top: 0, 
    height: "50dp", 
    width: Ti.UI.FILL, 
    backgroundGradient: { 
     type: "linear", 
     startPoint: { x: "0%", y:"0%"}, 
     endPoint: { x: "0%", y:"100%"}, 
     colors: [ 
      { color: "#4F94CD", offset: 0.0 }, 
      { color: "#4F94CD", offset: 1.0 } 
     ] 
    } 
} 

"#title": { 
    align: "center", 
    color: "#fff", 
    font: { 
     fontSize: '21dp', 
     fontWeight: 'bold' 
    } 
} 

".questionsContainer":{ 
    height:Ti.UI.FILL, 
    width:Ti.UI.FILL, 
    layout:'vertical', 
    backgroundColor:"#f39c12" 
} 
'.row':{ 
    height:'20%', 
    width:'100%', 
    backgroundColor:'#bdc3c7', 
    layout:'vertical' 
} 
".question":{ 
    font:{ 
     fontSize:18, 
     fontWeight:'normal' 
    }, 
    color:"#000", 
    left:10, 
    height:'50%' 
} 
".starRating":{ 
    height:'50%', 
    left:10 
} 
".processRating":{ 
    height:45, 
    width:'90%', 
    backgroundColor:'#3498db', 
    color:'#fff' 
} 

Answer 1

這一個很有意思。您有10行，但每行都是questionsContainer大小的「20％」。這意味着只有足夠的空間可以在屏幕上顯示5。

'.row':{ 
    // height:'20%', // <--- Change this to something else that isn't 20% 
    height: "200dp", 
    width:'100%', 
    backgroundColor:'#bdc3c7', 
    layout:'vertical' 
} 

讓我知道如果這不能解決它給你。在我偶然發現之前，我做了4-5個其他修改。