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

一、引入插件

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

二、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>
                </View>
                <ScrollView
                    style={dargStyle}
                    onTouchMove={this.touchmove}
                    onTouchEnd={this.touchEnd}
                    onTouchStart={this.touchStart}
                    onScrollToUpper={this.ScrollToUpper}
                    onScrollToLower={this.ScrollToLower}
                    className='dragUpdata'
                    scrollY={this.state.scrollY}
                    scrollWithAnimation>
                    <View style='width:100%;height:60vh;background:pink;' >aaaaaaaa</View>
                </ScrollView>
                <View className='upDragBox' style={upDragStyle}>
                    <AtActivityIndicator></AtActivityIndicator>
                    <Text className='downText'>{this.state.pullText}</Text>
                </View>
            </View>
			</View>
        )
    }

三、方法　　

constructor(props) {
        super(props)
        this.state = {
            dargStyle: {//下拉框的樣式
                top: 0 + 'px'
            },
            downDragStyle: {//下拉圖標的樣式
                height: 0 + 'px'
            },
            downText: '下拉刷新',
            upDragStyle: {//上拉圖標樣式
                height: 0 + 'px'
            },
            pullText: '上拉加載更多',
            start_p: {},
            scrollY:true,
            dargState: 0//刷新狀態 0不作操做 1刷新 -1加載更多
        }
    }
    reduction() {//還原初始設置
        const time = 0.5;
        this.setState({
            upDragStyle: {//上拉圖標樣式
                height: 0 + 'px',
                transition: `all ${time}s`
            },
            dargState: 0,
            dargStyle: {
                top: 0 + 'px',
                transition: `all ${time}s`
            },
            downDragStyle: {
                height: 0 + 'px',
                transition: `all ${time}s`
            },
            scrollY:true
        })
        setTimeout(() => {
            this.setState({
                dargStyle: {
                    top: 0 + 'px',
                },
                upDragStyle: {//上拉圖標樣式
                    height: 0 + 'px'
                },
                pullText: '上拉加載更多',
                downText: '下拉刷新'
            })
        }, time * 1000);
    }
    touchStart(e) {
        this.setState({
            start_p: e.touches[0]
        })
    }
    touchmove(e) {
		let that = this
        let move_p = e.touches[0],//移動時的位置
            deviationX = 0.30,//左右偏移量(超過這個偏移量不執行下拉操做)
            deviationY = 70,//拉動長度（低於這個值的時候不執行）
            maxY = 100;//拉動的最大高度

        let start_x = this.state.start_p.clientX,
            start_y = this.state.start_p.clientY,
            move_x = move_p.clientX,
            move_y = move_p.clientY;


        //獲得偏移數值
        let dev = Math.abs(move_x - start_x) / Math.abs(move_y - start_y);
        if (dev < deviationX) {//當偏移數值大於設置的偏移數值時則不執行操做
            let pY = Math.abs(move_y - start_y) / 3.5;//拖動倍率（使拖動的時候有粘滯的感受--試了不少次 這個倍率恰好）
			if (move_y - start_y > 0) {//下拉操做
				if (pY >= deviationY) {
					this.setState({ dargState: 1, downText: '釋放刷新' })
				} else {
					this.setState({ dargState: 0, downText: '下拉刷新' })
				}
				if (pY >= maxY) {
					pY = maxY
				}
				this.setState({
					dargStyle: {
						top: pY + 'px',
					},
					downDragStyle: {
						height: pY + 'px'
					},
					scrollY:false//拖動的時候禁用
				})
			}
			if (start_y - move_y > 0) {//上拉操做
				console.log('上拉操做')
				if (pY >= deviationY) {
					this.setState({ dargState: -1, pullText: '釋放加載更多' })
				} else {
					this.setState({ dargState: 0, pullText: '上拉加載更多' })
				}
				if (pY >= maxY) {
					pY = maxY
				}
				this.setState({
					dargStyle: {
						top: -pY + 'px',
					},
					upDragStyle: {
						height: pY + 'px'
					},
					scrollY: false//拖動的時候禁用
				})
			}

        }
    }
    pull() {//上拉
		console.log('上拉')
        // this.props.onPull()
    }
    down() {//下拉
	console.log('下拉')
        // this.props.onDown()
    }
    ScrollToUpper() { //滾動到頂部事件
	console.log('滾動到頂部事件')
        // this.props.Upper()
    }
    ScrollToLower() { //滾動到底部事件
	console.log('滾動到底部事件')
        // this.props.Lower()
    }
    touchEnd(e) {
        if (this.state.dargState === 1) {
            this.down()
        } else if (this.state.dargState === -1) {
            this.pull()
        }
        this.reduction()
    }

四、scss　　

.dragUpdataPage{height: 50vh;position: relative;overflow: hidden;
	.downDragBox{
	    width: 100%;
	    top: 0px;
	    display: flex;
	    overflow: hidden;
	    justify-content: center;
	    align-items: center;
	    font-size: 30px;
	    position: absolute;
	}
	.upDragBox{
	    bottom: 0px;
	    width: 100%;
	    display: flex;
	    overflow: hidden;
	    justify-content: center;
	    align-items: center;
	    font-size: 30px;
	    position: absolute;
	}
	.dragUpdata{height: 100%;width: 100%;position: absolute;}
	.downText{margin-left: 20px;}
}