可滚动视图在 appcelerator 中无法正确显示

Question

我已经在 appcelerator 中实现了一个可滚动的视图。但只显示第一张和最后一张图像。中间图像未加载。有什么建议吗？

这是可滚动视图的 .xml 文件的代码。

<Alloy>
    <View class="container">
        <View class = " HeadingClass" >
            <Label class="headingClass" top = "0%">Scrollable View And Animation Screen</Label>
        </View>
        <ScrollableView class = "scrollableViewClass" id="scrollableView">
            <ImageView class="imgView1" id="imgViewId1"></ImageView>
            <ImageView class="imgView2" id="imgViewId2"></ImageView>
            <ImageView class="imgView3" id="imgViewId3"></ImageView>
            <ImageView class="imgView4" id="imgViewId4"></ImageView>
            <ImageView class="imgView5" id="imgViewId5"></ImageView>
        </ScrollableView>
        <!-- <View class="imageAnimationView" id="imageAnimation">
            <ImageView class="animateImageClass" id="animateImage"></ImageView>
        </View> -->
    </View>
</Alloy> <Alloy>
    <View class="container">
        <View class = " HeadingClass" >
            <Label class="headingClass" top = "0%">Scrollable View And Animation Screen</Label>
        </View>
        <ScrollableView class = "scrollableViewClass" id="scrollableView">
            <ImageView class="imgView1" id="imgViewId1"></ImageView>
            <ImageView class="imgView2" id="imgViewId2"></ImageView>
            <ImageView class="imgView3" id="imgViewId3"></ImageView>
            <ImageView class="imgView4" id="imgViewId4"></ImageView>
            <ImageView class="imgView5" id="imgViewId5"></ImageView>
        </ScrollableView>
        <!-- <View class="imageAnimationView" id="imageAnimation">
            <ImageView class="animateImageClass" id="animateImage"></ImageView>
        </View> -->
    </View>
</Alloy>

这是 .tss 文件的代码

".container" : {
  backgroundColor : "lightgray"
},

".headingClass" : {
    height : "5%",
    width : "70%",
    font: {
        fontFamily: 'Arial',
        fontSize: '14%',
        fontWeight: 'bold'
    },
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
},

".HeadingClass" : {
    backgroundColor : "gray",
    top : "5%",
    height : "6%",
    width : "100%"
},

".scrollableViewClass" : {
    top : "15%",
    height : "30%",
    width : "100%",
    contentHeight: Ti.UI.SIZE,
    contentWidth: Ti.UI.SIZE,
    showPagingControl : true
},

".imgView1" : {
    image : "/Images/appceleratorImage1.png",
    height : "100%",
    width : "100%"
},

".imgView2" : {
    image : "/Images/appceleratorImage2.png",
    height : "100%",
    width : "100%"  
},

".imgView3" : {
    image : "/Images/appceleratorImage3.png",
    height : "100%",
    width : "100%"
},

".imgView4" : {
    image : "/Images/appceleratorImage4.png",
    height : "100%",
    width : "100%"
},

".imgView5" : {
    image : "/Images/appceleratorImage5.png",
    height : "100%",
    width : "100%"
}

Answer 1

尝试将 <View> 放在 <ImageView> 的周围。出于测试目的，您可以给他们一个 backgroundColor 以查看页面是否可见。

可滚动视图在 appcelerator 中无法正确显示

Scrollable View not displaying properly in appcelerator

view

appcelerator

scrollable