taro/微信小程序 ScrollView 实现下拉加载

https://taro-docs.jd.com/taro/docs/components/viewContainer/scroll-view/

import Taro from "@tarojs/taro";
import React, { Component } from "react";
import { getCurrentInstance } from "@tarojs/taro";
import { View, ScrollView, Text } from "@tarojs/components";
import CardItem from "../../components/CardItem";
import NoData from "../../components/NoData/index";
import api from "../../utils/network/request";
import "./list.less";

export default class Index extends Component {
  state = {
    tid: 0,
    list: [],
    page: 1,
    refresherTriggered: false,
    tips: "加载中...",
  };
  componentWillMount() {
    const { title, tid } = getCurrentInstance().router.params;
    Taro.setNavigationBarTitle({
      title: `${title}`,
    });
    this.getList(tid);
    this.setState({
      tid: tid,
    });
  }

  componentDidMount() {}

  componentWillUnmount() {}
  //消息分类列表
  getList(tid) {
    const { page } = this.state;
    api.request_post(
      "share/msgs",
      {
        tid: tid,
        pg: page,
      },
      true,
      (res) => {
        if (res.status == 1) {
          if (res.data.msgs.length == 0 && page === 1) {
            this.setState({
              noDataFlag: true,
              tips: "",
            });
          } else if (res.data.msgs.length < 10) {
            this.setState({
              tips: "我是有底线的",
            });
          }
          this.setState({
            list:
              page === 1
                ? res.data.msgs
                : [...this.state.list, ...res.data.msgs],

            refresherTriggered: false,
          });
        } else {
          toast.error(res.msg);
          this.setState({
            refresherTriggered: false,
          });
        }
      }
    );
  }
  // 下拉加载
  ScrollToLower = () => {
    if (this.state.tips === "我是有底线的" || this.state.noDataFlag) {
      return;
    }
    this.setState(
      {
        page: this.state.page + 1,
        tips: "加载中...",
      },
      () => {
        this.getList(this.state.tid);
      }
    );
  };
  modirltClick(item) {
    api.request_post(
      "center/modirlt",
      {
        uid: item.suid,
        act: item.fstatus == 0 ? 1 : 2,
      },
      true,
      (res) => {
        if (res.status == 1) {
          const { list } = this.state;
          this.setState({
            list: (list || []).map((items) =>
              item.suid == items.suid
                ? { ...items, fstatus: res.data.fstatus }
                : items
            ),
          });
        } else {
          toast.error(res.msg);
        }
      }
    );
  }
  goDetail(item) {
    switch (item.mtid) {
      case "5":
        //5时是飞猫云会员续费消息：点击进入SVIP购买页
        toast.error("请前往电脑端或飞猫云APP进行续费!");
        // Taro.navigateTo({
        //   url: "/pages/my/openSVIP",
        // });
        break;
      case "6":
        //6时是飞猫云获取优惠券消息：点击进入卡券包
        Taro.navigateTo({
          url: "/pages/my/cardPackage",
        });
        break;
      case "7":
        //7时是飞猫云活动信息（文字较多）：点击进入详情页展示完整内容
        Taro.navigateTo({
          url: `/pages/share/detail?id=${item.id}`,
        });
        break;
      case "15":
        //15时是粉丝
        Taro.navigateTo({
          url: `/pages/my/whaleSelection?uid=${item.uid}`,
        });
        break;
      default:
        break;
    }
  }
  render() {
    const { list, noDataFlag } = this.state;
    return (
      <View className="listItemPage">
        <ScrollView
          className="scrollView"
          refresherEnabled={false}
          refresherThreshold={100}
          scrollY
          refresherTriggered={this.state.refresherTriggered}
          onScrollToLower={this.ScrollToLower}
        >
          <View
            className="items"
            style={list.length > 0 ? "marginBottom: 50PX" : ""}
          >
            {list.map((item) => {
              return (
                <CardItem
                  data={item}
                  goNext={() => this.goDetail(item)}
                  handleBtnClick={() => this.modirltClick(item)}
                ></CardItem>
              );
            })}
              {noDataFlag ? <NoData type="message" noDataTips="暂无消息"></NoData>:<Text className="tips">{this.state.tips}</Text>}
            
          </View>
        </ScrollView>

      
      </View>
    );
  }
}

样式:

.scrollview{
height:100vh}