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

Easter79
• 阅读 2177

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>
                </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>
        )
    }

3、方法  

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()
    }

4、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;}
}
点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
taro小程序地址选择组件
效果图:!(https://img2018.cnblogs.com/blog/1141831/201901/11418312019012021483504149988772.gif)address\_picker.tsx:importTaro,{Component}from'@
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
3年前
ts 与 C#的 一个差异的地方
import{style}from'../assets';import{eventbus}from'../eventbus';import{page,RootObject}from'../vm/page';importasd3from'd3'importasd
Easter79 Easter79
3年前
taro 知识点
taro的包:包名说明@tarojs/reduxReduxforTaro@tarojs/reduxh5Forkedreactreduxfortaro@tarojs/plugincssoTaro压缩CSS文件内置环境变量process.env.TARO_ENV用于判断当前编译类型,目
Stella981 Stella981
3年前
React动画:react
1.安装yarnaddreacttransitiongroup2.使用CSSTransition组件importReact,{PureComponent}from'react';import{
Stella981 Stella981
3年前
Python import与from import使用及区别介绍
Python程序可以调用一组基本的函数(即内建函数),比如print()、input()和len()等函数。接下来通过本文给大家介绍Pythonimport与fromimport使用及区别介绍,感兴趣的朋友一起看看吧下面介绍下Pythonimport与fromimport使用,具体内容如下所示:Python程序可以调用一组基本的函数(即内建函
Stella981 Stella981
3年前
ReactNative—Text标签中的Style学习
1.引用需要的组件这里用到_AppRegistry,StyleSheet,Text,View_importReact,{Component}from'react';import{AppRegistry,//JS运行所有ReactNative应用的入口,必须引用Style
Easter79 Easter79
3年前
VUE AntDesign DatePicker设置默认显示当前日期
1:main.js中引入依赖importVuefrom"vue";import{DatePicker}from'antdesignvue';import'antdesignvue/dist/antd.css';设置中文importmomentfrom'm
Stella981 Stella981
3年前
AngularJS5.0 (第五篇)
新建approuting.module.tsimport{NgModule}from'@angular/core';import{CommonModule}from'@angular/common';import{RouterModule,Routes}from'@angular/router
Easter79 Easter79
3年前
Taro 2.2 全面插件化,支持拓展和定制个性化功能
!(https://oscimg.oschina.net/oscnet/up889c8772b4d4c4a678d00fc4ead5c097c76.png)自2.2开始,Taro引入了插件化机制,允许开发者通过编写插件的方式来为Taro拓展更多功能或者为自身业务定制个性化功能,欢迎大家进行尝试,共同讨论~当前版本2.2.1官
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k