└── dragUpdata ├── index.js └── index.scss /dragUpdata/index.js: -------------------------------------------------------------------------------- 1 | import Taro, { Component } from '@tarojs/taro' 2 | import { View, Text, ScrollView } from '@tarojs/components' 3 | import { AtActivityIndicator } from 'taro-ui' 4 | import './index.scss' 5 | export default class LyInput extends Component { 6 | static defaultProps = { 7 | pull: true,//上拉操作开关 8 | down: true,//下拉操作开关 9 | onPull: () => { },//上拉操作释放后触发事件 10 | onDown: () => { },//下拉操作释放后触发事件 11 | Upper: () => { },//滚动到顶部事件 12 | Lower: () => { }//滚动到底部事件 13 | } 14 | static propTypes = { 15 | 16 | } 17 | constructor(props) { 18 | super(props) 19 | this.state = { 20 | dargStyle: {//下拉框的样式 21 | top: 0 + 'px' 22 | }, 23 | downDragStyle: {//下拉图标的样式 24 | height: 0 + 'px' 25 | }, 26 | downText: '下拉刷新', 27 | upDragStyle: {//上拉图标样式 28 | height: 0 + 'px' 29 | }, 30 | pullText: '上拉加载更多', 31 | start_p: {}, 32 | scrollY:true, 33 | dargState: 0//刷新状态 0不做操作 1刷新 -1加载更多 34 | } 35 | } 36 | componentWillMount() { } 37 | 38 | componentDidMount() { } 39 | 40 | componentWillUnmount() { } 41 | 42 | componentDidShow() { } 43 | 44 | componentDidHide() { } 45 | reduction() {//还原初始设置 46 | const time = 0.5; 47 | this.setState({ 48 | upDragStyle: {//上拉图标样式 49 | height: 0 + 'px', 50 | transition: `all ${time}s` 51 | }, 52 | dargState: 0, 53 | dargStyle: { 54 | top: 0 + 'px', 55 | transition: `all ${time}s` 56 | }, 57 | downDragStyle: { 58 | height: 0 + 'px', 59 | transition: `all ${time}s` 60 | }, 61 | scrollY:true 62 | }) 63 | setTimeout(() => { 64 | this.setState({ 65 | dargStyle: { 66 | top: 0 + 'px', 67 | }, 68 | upDragStyle: {//上拉图标样式 69 | height: 0 + 'px' 70 | }, 71 | pullText: '上拉加载更多', 72 | downText: '下拉刷新' 73 | }) 74 | }, time * 1000); 75 | } 76 | touchStart(e) { 77 | this.setState({ 78 | start_p: e.touches[0] 79 | }) 80 | } 81 | touchmove(e) { 82 | let move_p = e.touches[0],//移动时的位置 83 | deviationX = 0.30,//左右偏移量(超过这个偏移量不执行下拉操作) 84 | deviationY = 70,//拉动长度（低于这个值的时候不执行） 85 | maxY = 100;//拉动的最大高度 86 | 87 | let start_x = this.state.start_p.clientX, 88 | start_y = this.state.start_p.clientY, 89 | move_x = move_p.clientX, 90 | move_y = move_p.clientY; 91 | 92 | 93 | //得到偏移数值 94 | let dev = Math.abs(move_x - start_x) / Math.abs(move_y - start_y); 95 | if (dev < deviationX) {//当偏移数值大于设置的偏移数值时则不执行操作 96 | let pY = Math.abs(move_y - start_y) / 3.5;//拖动倍率（使拖动的时候有粘滞的感觉--试了很多次 这个倍率刚好） 97 | if (this.props.down) { 98 | if (move_y - start_y > 0) {//下拉操作 99 | if (pY >= deviationY) { 100 | this.setState({ dargState: 1, downText: '释放刷新' }) 101 | } else { 102 | this.setState({ dargState: 0, downText: '下拉刷新' }) 103 | } 104 | if (pY >= maxY) { 105 | pY = maxY 106 | } 107 | this.setState({ 108 | dargStyle: { 109 | top: pY + 'px', 110 | }, 111 | downDragStyle: { 112 | height: pY + 'px' 113 | }, 114 | scrollY:false//拖动的时候禁用 115 | }) 116 | } 117 | } 118 | if (this.props.pull) { 119 | if (start_y - move_y > 0) {//上拉操作 120 | if (pY >= deviationY) { 121 | this.setState({ dargState: -1, pullText: '释放加载更多' }) 122 | } else { 123 | this.setState({ dargState: 0, pullText: '上拉加载更多' }) 124 | } 125 | if (pY >= maxY) { 126 | pY = maxY 127 | } 128 | this.setState({ 129 | dargStyle: { 130 | top: -pY + 'px', 131 | }, 132 | upDragStyle: { 133 | height: pY + 'px' 134 | }, 135 | scrollY: false//拖动的时候禁用 136 | }) 137 | } 138 | } 139 | 140 | } 141 | } 142 | pull() {//上拉 143 | this.props.onPull() 144 | } 145 | down() {//下拉 146 | this.props.onDown() 147 | } 148 | ScrollToUpper() { //滚动到顶部事件 149 | this.props.Upper() 150 | } 151 | ScrollToLower() { //滚动到底部事件 152 | this.props.Lower() 153 | } 154 | touchEnd(e) { 155 | if (this.state.dargState === 1) { 156 | this.down() 157 | } else if (this.state.dargState === -1) { 158 | this.pull() 159 | } 160 | this.reduction() 161 | } 162 | render() { 163 | let dargStyle = this.state.dargStyle; 164 | let downDragStyle = this.state.downDragStyle; 165 | let upDragStyle = this.state.upDragStyle; 166 | return ( 167 | 168 | 169 | 170 | {this.state.downText} 171 | 172 | 173 | 183 | {this.props.children} 184 | 185 | 186 | 187 | 188 | {this.state.pullText} 189 | 190 | 191 | ) 192 | } 193 | } 194 | 195 | -------------------------------------------------------------------------------- /dragUpdata/index.scss: -------------------------------------------------------------------------------- 1 | .dragUpdataPage{ 2 | height: 100vh; 3 | position: relative; 4 | overflow: hidden; 5 | } 6 | .dragUpdata{ 7 | height: 100%; 8 | width: 100%; 9 | position: absolute; 10 | } 11 | .downDragBox{ 12 | width: 100%; 13 | top: 0px; 14 | display: flex; 15 | overflow: hidden; 16 | justify-content: center; 17 | align-items: center; 18 | font-size: 30px; 19 | position: absolute; 20 | } 21 | .upDragBox{ 22 | bottom: 0px; 23 | width: 100%; 24 | display: flex; 25 | overflow: hidden; 26 | justify-content: center; 27 | align-items: center; 28 | font-size: 30px; 29 | position: absolute; 30 | } 31 | .downText{ 32 | margin-left: 20px; 33 | } --------------------------------------------------------------------------------