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>
        )
      }
    }
    
    

登录后回复