Taro下拉刷新，上拉加载更多

最新推荐文章于 2025-04-06 11:34:05 发布

葉幺

最新推荐文章于 2025-04-06 11:34:05 发布

阅读量2.3w

点赞数 15

分类专栏：前端移动端小程序开发 Taro 文章标签： taro 下拉刷新上拉加载

本文链接：https://blog.youkuaiyun.com/weixin_42861240/article/details/87867884

版权

本文介绍了如何在Taro框架中实现下拉刷新和上拉加载更多的功能，包括引入插件、配置render方法、定义相关方法及使用scss样式。通过示例代码和效果图，帮助读者理解并应用到自己的项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述

1、引入插件

import Taro, { Component } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import { AtActivityIndicator } from 'taro-ui'
import './index.scss'

2、render (){}

render () {
		let dargStyle = this.state.dargStyle;
        let downDragStyle = this.state.downDragStyle;
        let upDragStyle = this.state.upDragStyle;
        return (
			<View>
			<View style='width:100%;height:20vh;background:#993;' >aaaaaaaa</View>
            <View className='dragUpdataPage'>
                <View className='downDragBox' style={downDragStyle}>
                    <AtActivityIndicator></AtActivityIndicator>
                    <Text className='downText'>{this.state.downText}</Text>
                &l