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

效果图：

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><ScrollViewstyle={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 = thislet 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;}
}

感觉有用的麻烦点个赞！谢谢

Taro下拉刷新，上拉加载更多相关推荐

uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...
recyclerview的数据刷新（下拉刷新和自动加载更多）以及添加提示语（例如：“数据已加载完毕”）
下拉加载更多的核心是SwipeRefreshLayout搭配Recyclerview进行使用.布局为 <android.support.v4.widget.SwipeRefreshLayout ...
Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容环境测试数据项目结构演示参考资料本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
下拉加载实现 java_[Java教程]iscroll5实现一个下拉刷新上拉加载的效果
[Java教程]iscroll5实现一个下拉刷新上拉加载的效果 0 2016-08-24 15:00:08 直接上代码!!! * { margin: 0; padding: 0; } ul, li { ...
小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法
当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法. 思路很简单,类似于vue中给子组件加 ...
分享轮子-flutter下拉刷新上拉加载
flutter下拉上拉组件轮子什么是flutter? 首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Nat ...
使用MJRefresh自定义下拉刷新,上拉加载动画
有时候我们需要自己设置下拉刷新,上拉加载动画的实现,这里主要是记录下使用MJRefresh自定义下拉刷新,上拉加载动画..... 下拉刷新我们只需要继承MJRefreshGifHeader即可: 实现 ...
android listview下拉刷新动画,android 安卓 listview 支持下拉刷新上拉加载更多
[1]重写listViewimport java.text.SimpleDateFormat; import java.util.Date; import com.example.testdddlea ...
react-native 自定义下拉刷新 / 上拉加载更多组件
1.封装 Scroller 组件 src/components/Scroller/index.js /*** 下拉刷新/上拉加载更多组件(Scroller)*/ import React, {Com ...

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

Taro下拉刷新，上拉加载更多相关推荐

最新文章

热门文章