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 ...
随机推荐
- Git拉取远程仓库代码并更新本地仓库
1.git pull:获取最新代码到本地,并自动合并到当前分支 //查询当前远程分支 $ git remote -v //直接拉取并合并最新代码 $ git pull origin master [示 ...
- 为什么不让用join?《死磕MySQL系列 十六》
大家好,我是咔咔 不期速成,日拱一卒 在平时开发工作中join的使用频率是非常高的,很多SQL优化博文也让把子查询改为join从而提升性能,但部分公司的DBA又不让用,那么使用join到底有什么问题呢 ...
- php session 的使用方法
public function insert(Request $request){ $parm = $request->except('token'); $this->validate($ ...
- pycharm实用常用快捷键
我们在实用pycharm时候,可以使用一些快捷键来帮助我们写代码. 1 alt + enter 快速导包,在需要导入包时候可以使用这个快捷键: 2 alt + 1 可以快速打开或者关闭左侧projec ...
- Linux企业常用命令详解
cat :查看 cat [-AbeEnstTuv] [--help] [--version] fileName 常用参数: -n :由 1 开始对所有输出的行数编号 -b :和 -n 相似,对于空白行 ...
- 分布式锁用Redis与Zookeeper的使用
为什么用分布式锁? 在讨论这个问题之前,我们先来看一个业务场景: 系统A是一个电商系统,目前是一台机器部署,系统中有一个用户下订单的接口,但是用户下订单之前一定要去检查一下库存,确保库存足够了才会 ...
- Numpy库基础___二
ndarray一个强大的N维数组对象Array •ndarray的变换 x.reshape(shape)重塑数组的shape,要求元素的个数一致,不改变原数组 x = np.ones((2,3,4), ...
- VMware安装win7后,安装VMware Tools时报错安装程序无法继续。本程序需要您将此虚拟机上安装的操作系统更新到SP1
具体报错: 倘若你用的是这样的镜像:cn_windows_7_enterprise_x64_dvd_x15-70741.iso 换镜像源.换镜像源.换镜像源! 换成带sp1的iso镜像:cn_wind ...
- ansible 二主机和组
主机清单的管理 Ansible安装好之后的主机清单配置文件有如下两种: 1.yum安装,配置文件默认路径为: /etc/ansible/hosts 2.源码包安装,主机清单配置文件路径需要从软件包里面 ...
- 4月16日 python学习总结 封装之property、多态 、classmethod和staticmethod
一.封装之property @property把一个函数伪装成一个数据类型 @伪装成数据的函数名.setter 控制该数据的修改,修改该数据时触发 @伪装成数据的函数名.delect 控制该数 ...