首先是测试工程:
scroll-vue.zip
项目场景说明:
页面内有一个长列表arr1
,另外一个列表arr2
,是arr1
的计算属性(从arr1
中截取部分),然后页面中f-for
渲染arr2
。
复现步骤1:
1、上滑列表,使得arr2[0]
隐藏一部分:
2、点击【测试】按钮,这个按钮会修改arr[2]
的截取范围,从初始的截取0-10,改为截取1-11。此时列表会更新渲染。
不同设备的表现1:
在小程序开发者工具及安卓真机中,arr2[1]
会在最顶部,截图如下:
在IOS真机中,arr2[1]
会出现在arr2[0]
的位置,也就是上面复现步骤1中的一部分,大约是这样:
复现步骤2:
1、上滑列表较长距离,使得arr2
隐藏多个item,例如:
2、同样点击【测试】按钮,这个按钮会修改arr[2]
的截取范围,从初始的截取0-10,改为截取1-11。此时列表会更新渲染。
不同设备的表现2:
在小程序开发者工具及安卓真机中,页面不会有任何变化,和截取范围变化之前的页面一模一样。
在IOS真机中,arr2[4]
(也就是下图中name=5)的item会出现在截取范围变化前,arr2[3]
的位置,相当于全体上移了一个item的高度。
问题:
两者的表现差异是哪一端的问题?有没有办法可以让IOS和安卓的表现一致?