1、引入插件
1import Taro, { Component } from '@tarojs/taro' 2import { View, Text, ScrollView } from '@tarojs/components' 3import { AtActivityIndicator } from 'taro-ui' 4import './index.scss'
2、render (){}
1render () { 2 let dargStyle = this.state.dargStyle; 3 let downDragStyle = this.state.downDragStyle; 4 let upDragStyle = this.state.upDragStyle; 5 return ( 6 <View> 7 <View style='width:100%;height:20vh;background:#993;' >aaaaaaaa</View> 8 <View className='dragUpdataPage'> 9 <View className='downDragBox' style={downDragStyle}> 10 <AtActivityIndicator></AtActivityIndicator> 11 <Text className='downText'>{this.state.downText}</Text> 12 </View> 13 <ScrollView 14 style={dargStyle} 15 onTouchMove={this.touchmove} 16 onTouchEnd={this.touchEnd} 17 onTouchStart={this.touchStart} 18 onScrollToUpper={this.ScrollToUpper} 19 onScrollToLower={this.ScrollToLower} 20 className='dragUpdata' 21 scrollY={this.state.scrollY} 22 scrollWithAnimation> 23 <View style='width:100%;height:60vh;background:pink;' >aaaaaaaa</View> 24 </ScrollView> 25 <View className='upDragBox' style={upDragStyle}> 26 <AtActivityIndicator></AtActivityIndicator> 27 <Text className='downText'>{this.state.pullText}</Text> 28 </View> 29 </View> 30 </View> 31 ) 32 }
3、方法
1constructor(props) { 2 super(props) 3 this.state = { 4 dargStyle: {//下拉框的样式 5 top: 0 + 'px' 6 }, 7 downDragStyle: {//下拉图标的样式 8 height: 0 + 'px' 9 }, 10 downText: '下拉刷新', 11 upDragStyle: {//上拉图标样式 12 height: 0 + 'px' 13 }, 14 pullText: '上拉加载更多', 15 start_p: {}, 16 scrollY:true, 17 dargState: 0//刷新状态 0不做操作 1刷新 -1加载更多 18 } 19 } 20 reduction() {//还原初始设置 21 const time = 0.5; 22 this.setState({ 23 upDragStyle: {//上拉图标样式 24 height: 0 + 'px', 25 transition: `all ${time}s` 26 }, 27 dargState: 0, 28 dargStyle: { 29 top: 0 + 'px', 30 transition: `all ${time}s` 31 }, 32 downDragStyle: { 33 height: 0 + 'px', 34 transition: `all ${time}s` 35 }, 36 scrollY:true 37 }) 38 setTimeout(() => { 39 this.setState({ 40 dargStyle: { 41 top: 0 + 'px', 42 }, 43 upDragStyle: {//上拉图标样式 44 height: 0 + 'px' 45 }, 46 pullText: '上拉加载更多', 47 downText: '下拉刷新' 48 }) 49 }, time * 1000); 50 } 51 touchStart(e) { 52 this.setState({ 53 start_p: e.touches[0] 54 }) 55 } 56 touchmove(e) { 57 let that = this 58 let move_p = e.touches[0],//移动时的位置 59 deviationX = 0.30,//左右偏移量(超过这个偏移量不执行下拉操作) 60 deviationY = 70,//拉动长度（低于这个值的时候不执行） 61 maxY = 100;//拉动的最大高度 62 63 let start_x = this.state.start_p.clientX, 64 start_y = this.state.start_p.clientY, 65 move_x = move_p.clientX, 66 move_y = move_p.clientY; 67 68 69 //得到偏移数值 70 let dev = Math.abs(move_x - start_x) / Math.abs(move_y - start_y); 71 if (dev < deviationX) {//当偏移数值大于设置的偏移数值时则不执行操作 72 let pY = Math.abs(move_y - start_y) / 3.5;//拖动倍率（使拖动的时候有粘滞的感觉--试了很多次 这个倍率刚好） 73 if (move_y - start_y > 0) {//下拉操作 74 if (pY >= deviationY) { 75 this.setState({ dargState: 1, downText: '释放刷新' }) 76 } else { 77 this.setState({ dargState: 0, downText: '下拉刷新' }) 78 } 79 if (pY >= maxY) { 80 pY = maxY 81 } 82 this.setState({ 83 dargStyle: { 84 top: pY + 'px', 85 }, 86 downDragStyle: { 87 height: pY + 'px' 88 }, 89 scrollY:false//拖动的时候禁用 90 }) 91 } 92 if (start_y - move_y > 0) {//上拉操作 93 console.log('上拉操作') 94 if (pY >= deviationY) { 95 this.setState({ dargState: -1, pullText: '释放加载更多' }) 96 } else { 97 this.setState({ dargState: 0, pullText: '上拉加载更多' }) 98 } 99 if (pY >= maxY) { 100 pY = maxY 101 } 102 this.setState({ 103 dargStyle: { 104 top: -pY + 'px', 105 }, 106 upDragStyle: { 107 height: pY + 'px' 108 }, 109 scrollY: false//拖动的时候禁用 110 }) 111 } 112 113 } 114 } 115 pull() {//上拉 116 console.log('上拉') 117 // this.props.onPull() 118 } 119 down() {//下拉 120 console.log('下拉') 121 // this.props.onDown() 122 } 123 ScrollToUpper() { //滚动到顶部事件 124 console.log('滚动到顶部事件') 125 // this.props.Upper() 126 } 127 ScrollToLower() { //滚动到底部事件 128 console.log('滚动到底部事件') 129 // this.props.Lower() 130 } 131 touchEnd(e) { 132 if (this.state.dargState === 1) { 133 this.down() 134 } else if (this.state.dargState === -1) { 135 this.pull() 136 } 137 this.reduction() 138 }
4、scss
1.dragUpdataPage{height: 50vh;position: relative;overflow: hidden; 2 .downDragBox{ 3 width: 100%; 4 top: 0px; 5 display: flex; 6 overflow: hidden; 7 justify-content: center; 8 align-items: center; 9 font-size: 30px; 10 position: absolute; 11 } 12 .upDragBox{ 13 bottom: 0px; 14 width: 100%; 15 display: flex; 16 overflow: hidden; 17 justify-content: center; 18 align-items: center; 19 font-size: 30px; 20 position: absolute; 21 } 22 .dragUpdata{height: 100%;width: 100%;position: absolute;} 23 .downText{margin-left: 20px;} 24}