判断view 是否显示在scrollview 上

判断view 是否显示在scrollview 上

/*

  • 判断view 是否显示在scrollview 上

  • targetView 要判断是否在scrollview 上显示的targetView

  • horizontalScroll scrollview 是横向还是垂直滑动 ,yes 横向 no 垂直

*/

  • (BOOL)displayedInScreen:(UIView*)targetView horizontalScroll:(BOOL)horizontalScroll{

    BOOL show = YES;
    CGRect f = self.frame;
    if(horizontalScroll == YES){
    f.origin.x = self.contentOffset.x;
    }else{
    f.origin.y = self.contentOffset.y;
    }
    CGRect r = [self.superview convertRect:targetView.frame toView:self.superview];
    if(CGRectIntersectsRect(f, r)) {
    // view is visible
    show = YES;
    }else
    show = NO;

    return show;

}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用 `onScroll` 和 `onLayout` 属性来实现。具体步骤如下: 1. 在 `ScrollView` 组件中添加 `onScroll` 属性,监听滚动事件。 2. 在每行文本组件中添加 `onLayout` 属性,监听组件布局事件,获取当前行的位置信息。 3. 在 `onScroll` 回调中,通过 `nativeEvent.contentOffset.y` 获取当前滚动的垂直位置。 4. 遍历所有行文本组件,计算每行的位置信息,判断当前滚动位置处于哪一行,设置该行高亮样式。 示例代码如下: ``` import React, { useState } from 'react'; import { ScrollView, Text, View } from 'react-native'; const LineText = ({ text }) => { const [isHighlight, setIsHighlight] = useState(false); const [lineLayout, setLineLayout] = useState({}); const handleLayout = event => { setLineLayout(event.nativeEvent.layout); }; return ( <Text onLayout={handleLayout} style={{ backgroundColor: isHighlight ? 'yellow' : 'transparent' }} onPress={() => setIsHighlight(!isHighlight)} > {text} </Text> ); }; const HighlightScrollView = ({ texts }) => { const [highlightIndex, setHighlightIndex] = useState(0); const handleScroll = event => { const scrollY = event.nativeEvent.contentOffset.y; let index = 0; let minDistance = Number.MAX_SAFE_INTEGER; texts.forEach((text, i) => { const distance = Math.abs(lineLayouts[i].y - scrollY); if (distance < minDistance) { minDistance = distance; index = i; } }); setHighlightIndex(index); }; const lineLayouts = texts.map(() => ({})); const handleLineLayout = index => event => { lineLayouts[index] = event.nativeEvent.layout; }; return ( <ScrollView onScroll={handleScroll}> {texts.map((text, i) => ( <View key={i} onLayout={handleLineLayout(i)}> <LineText text={text} isHighlight={i === highlightIndex} /> </View> ))} </ScrollView> ); }; export default HighlightScrollView; ``` 在上面的代码中,`LineText` 组件代表每一行文本,`HighlightScrollView` 组件代表高亮滚动视图。`LineText` 组件中通过 `onLayout` 获取每一行的位置信息,通过 `isHighlight` 属性设置该行是否高亮。`HighlightScrollView` 组件中通过 `onScroll` 监听滚动事件,通过遍历所有行文本组件计算出当前滚动位置处于哪一行,设置该行高亮样式。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值