【AtTabs】：AtTabsPane嵌套ScrollView，假设有两个AtTabsPane嵌套ScrollView，那么下拉刷新会触发两次

[xuya227939]

问题描述 AtTabsPane下嵌套ScrollView，假设有两个AtTabsPane，那么ScrollView的下拉刷新会触发两次，从表现上来看，应该是AtTabsPane这东西，把所有的ScrollView渲染出来，我拉了2个ScrollView 的下拉刷新

复现步骤

/* eslint-disable no-undef */
import Taro, { Component } from '@tarojs/taro';
import { View, ScrollView } from '@tarojs/components';
import { AtTabs, AtTabsPane } from 'taro-ui';

export default class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            current: 1,
            refresherTriggered: false
        };
    }

    handleClick = (val) => {
        this.setState({ current: val });
    }

    // 滚动到底触发
    onScrollToLower(e) {
        console.log('onScrollToLower', e);
    }

    // 下拉刷新触发
    onRefresherRefresh = () => {
        console.log(1);
        this.setState({
            refresherTriggered: true
        });
        console.log(2);
        setTimeout(() => {
            this.setState({ refresherTriggered: false });
        }, 500);
    }

    render() {
        const { current, refresherTriggered } = this.state;
        const tabList = [{ title: '全部' }, { title: '待处理' }];
        const scrollStyle = {
            height: '100vh'
        };
        const vStyleA = {
            height: '150px',
            'background-color': 'rgb(26, 173, 25)'
        };
        const vStyleB = {
            height: '150px',
            'background-color': 'rgb(39,130,215)'
        };
        const vStyleC = {
            height: '150px',
            'background-color': 'rgb(241,241,241)',
            color: '#333'
        };
        return (
            <View>
                <AtTabs current={current} tabList={tabList} onClick={this.handleClick}>
                    <AtTabsPane key={0} current={current} index={0} >
                        <ScrollView
                            scrollY
                            scrollWithAnimation
                            scrollTop={0}
                            style={scrollStyle}
                            refresherEnabled
                            refresherTriggered={refresherTriggered}
                            onScrollToLower={this.onScrollToLower}
                            onRefresherRefresh={this.onRefresherRefresh}
                        >
                            <View style={vStyleA}>A</View>
                            <View style={vStyleB}>B</View>
                            <View style={vStyleC}>C</View>
                        </ScrollView>
                    </AtTabsPane>
                    <AtTabsPane key={1} current={current} index={1}>
                        <ScrollView
                            scrollY
                            scrollWithAnimation
                            scrollTop={0}
                            style={scrollStyle}
                            refresherEnabled
                            refresherTriggered={refresherTriggered}
                            onScrollToLower={this.onScrollToLower}
                            onRefresherRefresh={this.onRefresherRefresh}
                        >
                            <View style={vStyleA}>A</View>
                            <View style={vStyleB}>B</View>
                            <View style={vStyleC}>C</View>
                        </ScrollView>
                    </AtTabsPane>
                </AtTabs>
            </View>
        );
    }
}

期望行为 期望ScrollView触发一次

系统信息 "taro-ui": "^2.2.1"

[zhangcy1]

遇到了同样的问题，请问解决了吗？

[zhangcy1]

大兄弟，我的问题解决了，我是在3个 AtTabsPane 嵌套 ScrollView 实现索引选择器，实现每个 scrollIntoView 时，AtTabsPane 间的 ScrollView 会相互影响。 解决方法是给每个 ScrollView 下需要滚动到的子元素 id 加上该 ScrollView 特有的标识加以区分。 总结来说就是给每个 ScrollView 需要实现的功能加上不同的标识。 希望能帮到你或者能给你个思路。

[xuya227939]

@zhangcy1 我也是这样解决的，有点麻烦。