背景
項(xiàng)目使用taro開發(fā)徊件，需要轉(zhuǎn)多端（小程序、h5匆背、RN）呼伸。我們有個commonList列表組件，里面會對 taro的ScrollView組件進(jìn)行封裝钝尸，達(dá)到一些數(shù)據(jù)為空顯示占位或者下拉加載等功能括享；
有個小伙伴需要用這個組件進(jìn)行類似微信的聊天界面，
在輸入消息多于一屏的時候自然而然需要滾動到最底部珍促，使用戶看到的一直是最新的消息铃辖。
問題
看到這種需求首先就翻了翻官網(wǎng)，在ScrollView的屬性上看到了scrollIntoView屬性猪叙；
沒問題娇斩，用起來~我們每添加一條新增消息就給它一個新的Id并傳入組件中仁卷。
return <HKCommonList
{...this.props}
scrollIntoView={this.state.viewId}
/>
ok，看看效果犬第。微信小程序和RN效果如下：
動圖戳https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/ade5e185a0fed12876b329d06941c52a.gif
沒問題锦积，通過~
但是到了H5就會發(fā)生消息錯位的問題。歉嗓。丰介。。遥椿。
動圖戳 https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/a9579225c635d7d882be161e480b0ba3_22.gif
why基矮？Ｏⅰ冠场？！本砰？
分析
我們的commonList組件：
<ScrollView
style={{ width: '100%' }}
{...this.props}
scrollY
scrollWithAnimation
...
>
{this.props.data.map((v: { type: any }, i) => {
return this.props.rowRenderer(v.type, this.props.data, i); //自定義渲染
})}
</ScrollView>
并沒有什么特別的碴裙。。点额。
整個排查過程不太好描述啊舔株，翻了翻issue發(fā)現(xiàn)好多人都遇到過類似的問題，但是都不是很適用我們這種場景还棱。
把commonList組件中的代碼原封不動拿到我們的頁面組件里運(yùn)行表現(xiàn)也是正常的载慈，實(shí)在想不明白咋回事。珍手。办铡。
解決
最后的最后，有個需求需要給ScrollView中的列表內(nèi)容在加上一個id的容器包裹琳要，修改之后是這樣：
<ScrollView
style={{ width: '100%' }}
{...this.props}
scrollY
scrollWithAnimation
...
>
<View id={this.props.containerId || 'hkcommonlist-container'}>
{this.props.data·.map((v: { type: any }, i) => {
return this.props.rowRenderer(v.type, this.props.data, i); //自定義渲染
})}
</View>
</ScrollView>
之后再次進(jìn)行對話測試的回收就發(fā)現(xiàn)H5表現(xiàn)正常了９丫摺！Ｖ刹埂童叠！
改完之后H5效果如下，RN和小程序表現(xiàn)也正常：
動圖戳 https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/03cd2079f01468f2df0e061ff24aad2a.gif
