Appcelerator - 在顶部插入行时停止表格滚动答案

【问题标题】：Appcelerator - Stop table scrolling when inserting rows at the topAppcelerator - 在顶部插入行时停止表格滚动
【发布时间】：2016-05-06 04:42:32
【问题描述】：

我目前正在使用 Appcelerator studio v4.5.0 和 Ti SDK 5.2.2。这个问题涉及 iOS 和 Android，因为行为似乎是相同的。

我想在表格顶部插入数据。当我插入数据时，我希望表格保持静态，即 Twitter。数据应该出现在用户当前正在查看的内容之上，除了用户之外没有跳跃或移动表格。通过我尝试过的所有方法，您正在查看的内容会被添加的行数推低。如果添加足够多的行 - 体验会很不协调。

我已经尝试了以下方法，所有结果都导致表格移动：

保留源数组，插入其中并“刷新”表中的整个数据（这篇旧帖子 - Disable autoscroll top on insertRowBefore in a TableView in Appcelerator/Titanium）
使用 table.insertRowBefore(index, row) 和 table.isertRowAfter(index, row)
将行添加到新部分并使用 table.insertSectionBefore(index, section) 和 table.insertSectionAfter(index, section)
将 table.scrollable 设置为 false（试一试）

我目前正在尝试混合使用了解行高/行数并使用 table.scrollToIndex() 或 table.scrollToTop()。但是到目前为止，这两种方式都会导致非常跳跃的体验，尤其是在用户当前正在滚动的情况下。在 Android 上，这两个函数都占用有限的位置，并且半行不可用。

我是否缺少强制表格执行此操作的设置？或者它是纯索引，表中的索引 5 现在是索引 7（添加 2 行之后）并且表保持在索引 5？我真的很讨厌不得不“围绕这个进行设计”，因为这显然是可能的。

任何帮助表示赞赏。

【问题讨论】：

是否非常需要保持表格静态，因为我们应该向用户显示已插入/删除的数据？如果非常需要（从您的描述性帖子看来也是如此），请尝试查看：TableViewAnimation Properties 我也会尝试做同样的事情。谢谢
感谢您的反馈。是的，这很重要。动画属性仅适用于 iOS。它也默认为 Titanium.UI.iPhone.TableViewScrollPosition.NONE - 我认为这是我想要的，因为其他人试图将插入的行放在可见屏幕上。
是的，我忘了说这个属性只在 iOS 上。在 Android 上，您可以尝试以下步骤： 1. 将表格不透明度设置为 0.... 2. 然后计算您之前所在的位置.... 3. 现在插入行.... 4. 滚动到上一个计算出的位置... 5. 将 tableview 不透明度重置为 1... 我认为它至少会消除跳跃滚动的机会，并且运行这个过程只需要几毫秒，所以它应该在没有其他解决方案似乎可行的情况下工作。另请注意，不要设置可见属性，仅使用不透明度，因为可见属性可能会改变 tableview。
这可能是一个很好的功能请求。堆栈溢出是not the right place。请检查是否已通过Appcelerator JIRA 请求。如果没有，请创建一个工单，链接到此问题，但还要在工单中提供完整的描述。不要忘记在此处放置门票链接，以便其他人可以与您一起观看。

标签： scroll insert tableview appcelerator appcelerator-titanium

【解决方案1】：

好吧，似乎没有任何设置可以阻止表格在插入时滚动，因为它实际上只是试图将用户保持在上次所在的索引处。但是，以下内容在 iOS 上运行得相当流畅。为了减轻在 Android 上的跳跃，请使用 @PrashantSaini 方法。

在表格的滚动事件中，存储用户的位置：

var scrollPos;
self.addEventListener('scroll',function(e){
    if(Ti.Platform.osname === 'android'){
        scrollPos = e.firstVisibleItem;
    }else{
        scrollPos = e.contentOffset.y;
    }
}

然后，在插入行/节后，使用 scrollToTop 设置表格的查看位置。

table.insertRowBefore(indexToInsert,tableData[i],{animated:false});

//Adjust the scroll position for the height of the row for iOS and index for Android
scrollPos += (Ti.Platform.osname === 'android')?1:200;

//Make table opaque for a while while it does its thing - Android only
if(Ti.Platform.osname === 'android'){table.opacity = 0.2;}

//Do the scroll
table.scrollToTop(scrollPos, {animated:false});

//Opacity back to normal in Android
if(Ti.Platform.osname === 'android'){table.opacity = 1.0;}

请注意，这将导致 Android 跳转，并且还需要您知道要插入的行的高度。

【讨论】：