Taro使用hook的情况下下拉刷新

Taro使用hook的情况下下拉刷新

 onTouchEnd={(e) => {
  console.log(e.currentTarget);
  // 下拉刷新
  e.currentTarget.offsetTop === 100
  && Taro.showNavigationBarLoading()
  _member.getMember((result) => {
    setMember(result.data.data)
    Taro.hideNavigationBarLoading()
    Taro.stopPullDownRefresh()
  }, (err) => {
    console.log(err);
  })
}}
要在 Taro实现下拉刷新功能,你需要使用 Taro 提供的 `ScrollView` 组件,并在其中使用 `onScrollToLower` 属性来监听到达底部事件。以下是一个简单的示例代码: ```jsx import { ScrollView, View } from '@tarojs/components'; import Taro from '@tarojs/taro'; class MyPage extends Taro.Component { constructor(props) { super(props); this.state = { dataList: [], page: 1, size: 10, }; } componentDidMount() { // 页面加载时,执行一次下拉刷新 this.onPullDownRefresh(); } async onPullDownRefresh() { // 模拟异步加载数据 const newData = await this.loadData(this.state.page, this.state.size); this.setState({ dataList: newData, page: 1, }); Taro.stopPullDownRefresh(); } async onReachBottom() { // 模拟异步加载数据 const newData = await this.loadData(this.state.page + 1, this.state.size); this.setState({ dataList: [...this.state.dataList, ...newData], page: this.state.page + 1, }); } async loadData(page, size) { // 模拟异步加载数据 return new Promise((resolve) => { setTimeout(() => { const newData = Array.from({ length: size }, (_, i) => ({ id: (page - 1) * size + i, text: `数据${(page - 1) * size + i}` })); resolve(newData); }, 1000); }); } render() { return ( <ScrollView scrollY style={{ height: '100vh' }} onScrollToLower={this.onReachBottom}> <View> {this.state.dataList.map((data) => ( <View key={data.id}>{data.text}</View> ))} </View> </ScrollView> ); } } ``` 在上面的代码中,我们通过 `ScrollView` 组件来实现滚动,并通过 `onScrollToLower` 属性来监听到达底部事件,然后在事件回调函数中加载更多数据并更新状态。同时,我们也重写了 `onPullDownRefresh` 方法,来实现下拉刷新功能。在该方法中,我们模拟了异步加载数据的过程,并在加载完成后通过 `setState` 方法来更新状态,最后调用 `Taro.stopPullDownRefresh()` 方法来停止下拉刷新动画。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hope Fancy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值