美文网首页
FlatList锚点scrollToIndex精准比例定位

FlatList锚点scrollToIndex精准比例定位

作者: 春雨霏霏_____ | 来源:发表于2018-07-03 18:30 被阅读0次

    1.测量需要滑动到的楼层位置

    首先引入

    import {

        UIManager,

        findNodeHandle

    } from 'react-native';

    再给组件加上引用

    this.myComponent=ref

    最后测量

    UIManager.measure(findNodeHandle(this.myComponent),(x,y,width,height,pageX,pageY)=>{

                    //tod

      })

    2.初步理解FlatList滑动方法

    scrollToIndex(params: object) 

    Scrolls to the item at a the specified index such that it is positioned in the viewable area such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.

    如果不设置getItemLayout属性的话,可能会比较卡。

    scrollToItem(params: object) 

    Requires linear scan through data - use scrollToIndex instead if possible. 如果不设置getItemLayout属性的话,可能会比较卡。

    scrollToOffset(params: object) 

    Scroll to a specific content pixel offset, like a normal ScrollView.

    3.scrollToIndex位置精确viewPosition

    设导航条高度和吸顶Tab高度为一个固定值 paddingH

    设FlatList的高度为一个固定值 flatListH

    设第一步测出来的楼层高度为一个固定值 flatFloorH

    设最终viewPosition的值为未知数R

    列出一元一次方程

    (flatListH * R - paddingH) / flatFloorH = R

    求解出 R = paddingH/(flatListH - flatFloorH)

    this.flatListView.scrollToIndex({viewPosition: R, index: index);

    相关文章

      网友评论

          本文标题:FlatList锚点scrollToIndex精准比例定位

          本文链接:https://www.haomeiwen.com/subject/wfekyftx.html