滚动视图钛的问题？

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个其他修改。