ScrollView 的 refresherTriggered 功能无效

[cyzeng-Luca]

相关平台

微信小程序

小程序基础库: 2.16.1
使用框架: React

复现步骤

import React, { Component } from 'react';
import Taro, { Config } from '@tarojs/taro';
import { View, Text, ScrollView } from '@tarojs/components';

import './index.scss';

export default class PageView extends Component {
  state = {
    refresher: true,
  };

  changeRefresher = () => {
    setTimeout(() => {
      console.log('触发下拉刷新结束');
      this.setState({
        refresher: true,
      });
    }, 3000);
  };

  render() {
    const { refresher } = this.state;
    return (
      <ScrollView
        scrollY
        refresherEnabled
        refresherThreshold={100}
        refresherTriggered={refresher}
        onRefresherRefresh={() => {
          this.changeRefresher();
        }}
      >
        {Array(100)
          .fill(0)
          .map((item, index) => (
            <View>{index}</View>
          ))}
      </ScrollView>
    );
  }
}

ScrollView 的 refresherTriggered 功能无效

期望结果

ScrollView 的 refresherTriggered 功能 有效

实际结果

ScrollView 的 refresherTriggered 功能 无效

环境信息

 Taro v3.2.5


  Taro CLI 3.2.5 environment info:
    System:
      OS: macOS 11.2.2
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.9.0 - /usr/local/bin/node
      Yarn: 1.22.5 - /usr/local/bin/yarn
      npm: 6.14.6 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.2.6 => 3.2.6 
      @tarojs/components: 3.2.6 => 3.2.6 
      @tarojs/mini-runner: 3.2.6 => 3.2.6 
      @tarojs/react: 3.2.6 => 3.2.6 
      @tarojs/runtime: 3.2.6 => 3.2.6 
      @tarojs/taro: 3.2.6 => 3.2.6 
      @tarojs/webpack-runner: 3.2.6 => 3.2.6 
      babel-preset-taro: 3.2.6 => 3.2.6 
      eslint-config-taro: 3.2.6 => 3.2.6 
      react: ^16.10.0 => 16.14.0 

[Chen-jj]

@cyzeng-Luca 用法问题，可以参考这个原生的代码片段：https://developers.weixin.qq.com/s/hGFhMum67de0

出处：https://developers.weixin.qq.com/community/develop/doc/0000226ab349b831770a7b47e51400

应该需要在 onReady 时修改 refresherTriggered 的值才可以，给予默认值是不生效的（原生也一样）

可行代码例子：

import React, { Component } from 'react';
import Taro, { Config } from '@tarojs/taro';
import { View, Text, ScrollView } from '@tarojs/components';

import './index.scss';

export default class PageView extends Component {
  state = {
    refresher: false,
  };

  onReady () {
    setTimeout(() => {
      this.setState({
        refresher: true
      })
    }, 1000)
  }

  changeRefresher = () => {
    if (this._freshing) return
    this._freshing = true
    setTimeout(() => {
      this.setState({
        refresher: false,
      })
      this._freshing = false
    }, 3000)
  };

  render() {
    const { refresher } = this.state;
    return (
      <ScrollView
        scrollY
        refresherEnabled
        refresherThreshold={100}
        refresherTriggered={refresher}
        onRefresherRefresh={() => {
          this.changeRefresher();
        }}
      >
        {Array(100)
          .fill(0)
          .map((item, index) => (
            <View>{index}</View>
          ))}
      </ScrollView>
    );
  }
}