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;}
}

  

Taro下拉刷新,上拉加载更多的更多相关文章

  1. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  2. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  3. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  4. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  5. Android如何定制一个下拉刷新,上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  6. Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表

    本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...

  7. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  8. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  9. [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

    第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

  10. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

随机推荐

  1. 【行业Tip】三电是什么

    电动汽车的"三电"是指:电池.电机.电控.

  2. MySQL 8.0.13(Windows压缩版本)下载安装教程

    MySQL下载安装教程 1.首先在百度上搜索mysql 2.点击链接进去,找到对应的路径 3.进去之后,可以看到版本是8.0.13,以及最下面有个Download按钮,点击下载 4.之后会跳转到开始下 ...

  3. Laravel-QueryList-采集

    <?php namespace App\Http\Controllers; use App\Models\NewsModel; use Illuminate\Http\Request; use ...

  4. Python的编译安装

    到 Python 官网下载 Python3 curl -O https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz 安装依赖 sudo apt ...

  5. [C++] C++socket套接字网络通讯实例

    //服务器端:#include "winsock2.h"  #include <string>#pragma comment(lib, "ws2_32.lib ...

  6. 5月14日 python学习总结 视图、触发器、事务、存储过程、函数、流程控制、索引

    一.视图 1.什么是视图 视图就是通过查询得到一张虚拟表,然后保存下来,下次用的直接使用即可 2.为什么要用视图 如果要频繁使用一张虚拟表,可以不用重复查询 3.如何用视图 create view t ...

  7. hdu5197 DZY Loves Orzing(FFT+分治)

    hdu5197 DZY Loves Orzing(FFT+分治) hdu 题目描述:一个n*n的矩阵里填入1~n^2的数,要求每一排从前往后能看到a[i]个数(类似于身高阻挡视线那种),求方案数. 思 ...

  8. Mybatis入门实例解析

    写在前面:本文全程根据Mybatis官网进行入门讲解.毫无疑问,官方文档是学习这门技术最权威的资料,与此同时我们也知道官方文档对待入门小白基本上不太友好,没有入门demo.开篇就是小白们不懂的内容.有 ...

  9. HarmonyOS USB DDK助你轻松实现USB驱动开发

    HDF(Hardware Driver Foundation)驱动框架是HarmonyOS硬件生态开放的基础,为开发者提供了驱动加载.驱动服务管理和驱动消息机制等驱动能力,让开发者能精准且高效地开发驱 ...

  10. 有序全排列c++实现(递归)

    1 #include <iostream> 2 #include <algorithm> 3 #include <iterator> 4 #include < ...