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>
<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下拉刷新,上拉加载更多的更多相关文章
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- juery下拉刷新,div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- Android如何定制一个下拉刷新,上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多
ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
- [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
随机推荐
- Python中的dotenv的详细用法
最简单和最常见的用法是在应用程序启动时调用load_dotenv,从当前目录或其父目录中的.env文件或指定的路径加载环境变量,然后你可以调用os.getenv提供的与环境相关的方法. .env 文件 ...
- Linux下面怎么安装PHP扩展?
一般开发环境都是在windows上, 安装扩展也很容易, 直接把下载的.dll文件扔到ext下面, 改一下php.ini文件. 完事了. linux上有两种安装方法 1.编译安装 //下载文件 #wg ...
- LGP4451题解
题意明确,不再阐述( 首先,众所周知的是 斐波那契数列 的生成函数是 \(F(x)=\frac x {1-x-x^2}\) 那么答案就是 \(\sum_{i=0} F^i(x) = \frac 1 { ...
- ArcMap操作随记(9)
1.类似PS中功能的工具 [镜像要素].[比例].[延伸] 2.快速获得栅格统计参数 [获取栅格属性]工具 3.[编辑器][创建要素][构造工具] 可以右键,输入半径等参数 4.计算面的角度 [计算面 ...
- Redis 大 key 问题总结
多大的 key 算大? 阿里云Redis 最佳实践中提到 合理的 Key 中 Value 的字节大小,推荐小于10 KB.过大的 Value 会引发数据倾斜.热点Key.实例流量或 CPU 性能被占满 ...
- Java 8 + 10 = Java 18
明天Java 18将正式发布, 虽然它不是长期支持 (LTS) 版本,但它却实现了九个 JEP(在Java 18列出).有哪些特性值得关注呢?今天胖哥为你提前解读.再看.点赞.转发.关注来一波吧. J ...
- tomcat manager status配置
1. 确保tomcat下原来自带的几个项目未被删掉,tomcat启动时localhost:8080能直接访问tomcat主页 2. 修改tomcat下 conf/tomcat-users-xml文件, ...
- Java的自动装箱与拆箱(Autoboxing and unboxing)
一.什么是自动装箱拆箱 很简单,下面两句代码就可以看到装箱和拆箱过程 1 //自动装箱 2 Integer total = 99; 3 4 //自动拆箱 5 int totalprim = total ...
- linux的服务自动启动的配置
1.开机启动时自动运行程序 Linux加载后, 它将初始化硬件和设备驱动, 然后运行第一个进程init.init根据配置文件继续引导过程,启动其它进程.通常情况下,修改放置在 /etc/rc或 /et ...
- Spring Boot 增加删除修改 批量
1.批量删除 a.自定义Repositoy中写 前台处理https://blog.csdn.net/yhflyl/article/details/81557670首先前台先要获取所有的要删除数据的I ...