使用ScrollableView在iOS上无法使用滑动后退手势

Question

我正在使用带有SDK 5.4.0GA的Appcelerator Studio 4.7.

我想使用滑动后退手势返回到上一个视图控制器,但是ScrollableView即使我在屏幕的左边缘开始我的手势,我的触摸也会移动视图.如果没有结束,滑动后退手势可以正常工作ScrollableView.

当我使用Titanium Studio 3.4时,一切都很好.目前无法使用它,因为它不受支持,您甚至无法登录.

这个问题是因为Appcelerator Studio,而不是因为SDK版本.我尝试使用具有相同SDK版本的Titanium Studio和Appcelerator Studio,并且只有Appcelerator Studio出现此问题.这就是我一年前坚持使用Titanium Studio的原因,但现在却不可能.

以下是没有解决方案的相关主题:https://archive.appcelerator.com/topic/581/swipe-right-from-the-edge-to-go-back-to-the-previous-window-doesn-t-工作了合IOS-使用-SDK-3-5-1-GA-和-4-0-0-GA/4

编辑.如何在2分钟内重现它:

1)文件 - >新建 - >移动应用项目 - >默认合金项目

2)添加名为scrollable的新控制器

scrollable.xml:

<Alloy>
    <Window class="container">
        <ScrollableView>
            <ScrollView>
                <View height="5000" backgroundColor="#DBD6D6">
                    <Label top="20">View1</Label>
                </View>
            </ScrollView>
            <ScrollView>
                <View height="5000" backgroundColor="#FED2FB">
                    <Label top="20">View2</Label>
                </View>
            </ScrollView>
            <ScrollView>
                <View height="5000" backgroundColor="#DCEFD7">
                    <Label top="20">View3</Label>
                </View>
            </ScrollView>
        </ScrollableView>
    </Window>
</Alloy>

index.js:

function doClick(e) {
    var scrollableController = Alloy.createController('scrollable',{
    });

    var view = scrollableController.getView();
    $.index.openWindow(view);
}

$.index.open();

INDEX.XML:

<Alloy>
    <NavigationWindow>
        <Window class="container" id="index">
            <Label id="label" onClick="doClick">Press me</Label>
        </Window>
    </NavigationWindow>
</Alloy>

3)这就是全部!

Answer 1

首先，我已经在 Appcelerator Studio 上尝试过您的代码，所以我不确定在这种情况下 Titanium Studio 上发生了什么。

现在，由于 Ti.UI.Window swipeToClose属性直到Ti SDK 5.2.0.GA才存在，因此您可以确定这是否真的是 Studio 错误或 SDK 功能。我确信这不是问题，只是一个误解。

对于您的查询，有两种方法（据我所知）可以提供“滑动到上一个窗口”（比如说 SPW）功能以及“可滚动”功能，即在ScrollableView及其父视图之间留下一些填充，如下所示：

-方法1-

<Alloy>
    <Window class="container" backgroundColor="white">
        <ScrollableView backgroundColor="blue" clipViews="false" left="20" right="20">
            <View backgroundColor="red">
                <Label>View1</Label>
            </View>
            <View backgroundColor="green">
                <Label>View2</Label>
            </View>
            <View backgroundColor="cyan">
                <Label>View3</Label>
            </View>
        </ScrollableView>
    </Window>
</Alloy>

这些是我在您的代码中所做的更改：

• 添加了 20dp 的左 + 右内边距，这将启用 SPW 功能，但 ScrollableView 的宽度将更小。
• 设置ClipViews属性以显示相邻视图以获得更好的 UI。如果将此属性设置为 true，则 SPW 功能也将起作用。

-方法 2-仅当您通过使用 hitRect 属性知道 ScrollableView 的确切尺寸时才有效

// replace the line in Method 1 with this one and apply the tss on it
<ScrollableView backgroundColor="blue" id="SC">

可滚动.tss

   "#SC" : {
        // (x,y) is top-left corner of hitRect and height/width will determine its dimension where user can swipe the scrollable view
        // on remaining area, you can perform SPW feature 
        hitRect : {
            x : 100,
            y : 100,
            height : 200,   
            width : 200    
        }
    }

既然您已经了解了如何实现这两个功能，我希望您发现它很有用。