ScrollView上拉加载更多和下拉刷新不起作用
-
在本地上拉加载更多和下拉刷新是好的部署上去后就不行了，一滑动整个页面都在跟着滑动
-
@冯强19920120 ScrollView 的高度是不是设置有问题了？来个demo看看咯
-
@Taro-小助手-honly 高度没有设置，我用的是flex布局ScrollView用的是flex：1，整体高度是100%
<View className='yd-voucher'>
<View className='yd-voucher-header'>
<Text>优惠券</Text>
</View>
<View className='yd-voucher-navbar'>
<View onClick={this.handleNoverUsed} className={this.state.voucherType === 0 ? 'yd-voucher-nav-noverUsed-active yd-voucher-nav-noverUsed' : 'yd-voucher-nav-noverUsed'}>未使用</View>
<View onClick={this.handleHasUsed} className={this.state.voucherType === 1 ? 'yd-voucher-nav-hasUsed-active yd-voucher-nav-hasUsed' : 'yd-voucher-nav-hasUsed'}>已使用</View>
<View onClick={this.handleOverdue} className={this.state.voucherType === 2 ? 'yd-voucher-nav-overdue-active yd-voucher-nav-overdue' : 'yd-voucher-nav-overdue'}>已过期</View>
</View>
<ScrollView scrollY upperThreshold={20} onScrollToUpper={this.toRefresh.bind(this)} lowerThreshold={20} onScrollToLower={this.toLoadMore.bind(this)} className='ydx-voucher-tab'>
<View className={this.state.voucherType === 0 ? 'ydx-voucher-noverUsed-content pt-page-rotateRoomTopIn' : this.state.voucherType === 1 ? 'ydx-voucher-hasUsed-content pt-page-rotateRoomTopIn ydx-voucher-transparent' : 'ydx-voucher-overdue-content pt-page-rotateRoomTopIn ydx-voucher-transparent'}>
{voucherListEle}
</View>
</ScrollView>
</View>
-
@Taro-小助手-honly ScrollView onScrollToLower 怎么拉到底都不触发
-
@jd_5cb6196859c2e 要设置upperThreshold的，upperThreshold的默认值好像不起作用你要给他个值
-
我也遇到这个问题，无法禁止微信默认的查看来源。禁用了下拉也会有问题。只能在h5下用。
后来勉强封装了一个,微信中要轻轻的下拉，暂停一会，才能触发，否则根本不会触发thouchend事件，所以，用cancel事件来复原下拉，要不在微信就没法复原了。我的封装组件：import Taro, { Component } from '@tarojs/taro'; import { ScrollView, View } from '@tarojs/components'; import { AtActivityIndicator } from 'taro-ui'; import { getWindowHeight } from '@/utils/utils'; import './index.scss'; // 楼宇选择器 export default class WScroll extends Component { static defaultProps = { height: getWindowHeight(false, 0), upperThreshold: 50, lowerThreshold: 50, scrollY: true, onScroll: () => {}, onScrollToUpper: () => {}, onScrollToLower: () => {}, reload: () => {} }; constructor (props) { super(props) this.state = { // eslint-disable-next-line react/no-unused-state scrollTop: 0, downText: '下拉刷新', hide: true, // 提示元素隐藏 // eslint-disable-next-line react/no-unused-state flage: false, // 执行刷新函数标志位 // eslint-disable-next-line react/no-unused-state transitionWidth: 0 // 保证能进入【下拉刷新】就能继续【释放更新】的变量, } } componentDidMount = () => { if (process.env.TARO_ENV === 'h5') { this.wrapBoxHandle() this.refresh() } }; // 滚动时触发 onScroll = event => { // 只有scrollTop为0，才可以下拉刷新 if (event.detail.scrollTop <= 100) { // eslint-disable-next-line react/no-unused-state this.setState({ scrollTop: event.detail.scrollTop }) } this.props.onScroll(event) }; // 滚动到顶部/左边，会触发 scrolltoupper 事件 onScrollToUpper = event => { this.props.onScrollToUpper(event) }; // 滚动到底部/右边，会触发 scrolltolower 事件，滚动底部，下一页 onScrollToLower = event => { this.props.onScrollToLower(event) }; refresh = () => { // 下拉刷新功能函数 let that = this let _element = document.getElementById('refreshContainer'), _startPos = 0, _startX = 0, _transitionWidth = 0, _transitionHeight = 0 _element.addEventListener( 'touchstart', function (e) { _startPos = e.touches[0].pageY _startX = e.touches[0].pageX _element.style.position = 'relative'; _element.style.transition = 'transform 0s'; that.setState({ flage: false }) }, false ) _element.addEventListener( 'touchmove', function (e) { if (that.state.transitionWidth === 0) { // 阻止其频繁变动，保证能进入【下拉刷新】就能继续【释放更新】 _transitionWidth = Math.abs(e.touches[0].pageX - _startX) // 防止横向滑动 } _transitionHeight = e.touches[0].pageY - _startPos if ( that.state.scrollTop === 0 && _transitionWidth < 10 && _transitionHeight > 0 && _transitionHeight < 60 ) { that.setState({ hide: false, downText: '下拉刷新', transitionWidth: _transitionWidth // 保证能进入【下拉刷新】就能继续【释放更新】 }) if (_transitionHeight > 30) { _element.style.transform = 'translateY(30px)'; that.setState({ downText: '释放更新', flage: true, transitionWidth: 0 // 一个流程走完，重置 }) } } }, false ) _element.addEventListener( 'touchend', function (e) { _element.style.transition = 'transform 0.5s'; _element.style.transform = 'translateY(0px)'; if (that.state.flage) { // 标志下滑的值达到刷新，就执行刷新函数 that.setState({ downText: '正在刷新...' }) that.props.reload({ type: 'refresh', page: 1 }).then(() => { that.setState({ hide: true }) }) } else { that.setState({ hide: true }) } }, false ) _element.addEventListener( 'touchcancel', function (e) { _element.style.transition = 'transform 0.5s'; _element.style.transform = 'translateY(0px)'; that.setState({ hide: true }) }, false ) }; wrapBoxHandle = () => { // 兼容Android，解决下拉触发微信网页的下拉。 let that = this let _element = document.getElementById('app'), _startPos = 0, _transitionHeight = 0 _element.addEventListener( 'touchstart', function (e) { _startPos = e.touches[0].pageY }, false ) _element.addEventListener( 'touchmove', function (e) { _transitionHeight = e.touches[0].pageY - _startPos console.log(that.state.scrollTop, _transitionHeight) if (that.state.scrollTop === 0 && _transitionHeight > 0) { // 位于滚动元素顶部并且向下滑动时 e.preventDefault() // 取消事件的默认动作。可屏蔽android端微信网页自带的拉下动作。 } }, false ) }; render () { const { downText, hide } = this.state const { height, lowerThreshold, upperThreshold, scrollY } = this.props return ( <View className='wx-scroll' style={{ height: height }}> {!hide && ( <View className='wx-scroll__down'> <AtActivityIndicator content={downText}></AtActivityIndicator> </View> )} <ScrollView id='refreshContainer' scrollWithAnimation className='wx-scroll-view' scrollY={scrollY} style={{ height: height }} lowerThreshold={lowerThreshold} upperThreshold={upperThreshold} onScrollToLower={this.onScrollToLower} onScrollToUpper={this.onScrollToUpper} onScroll={this.onScroll} > <View id='RefreshContainer-scroll'>{this.props.children}</View> </ScrollView> </View> ) } }