导航

    Taro 社区

    Taro

    • 注册
    • 登录
    • 搜索
    • 版块
    • 最新
    • 话题
    • 热门
    • 群组
    1. 主页
    2. xiangcaozhu
    X
    • 资料
    • 关注
    • 粉丝
    • 主题
    • 帖子
    • 最佳
    • 群组

    xiangcaozhu

    @xiangcaozhu

    0
    声望
    4
    帖子
    801
    资料浏览
    0
    粉丝
    0
    关注
    注册时间 最后登录

    xiangcaozhu 关注

    xiangcaozhu 发布的帖子

    • RE: Taro组件Swiper组件,onChange中setState,时,会导致不停的调用

      最近,在用swiper组件,初始化显示第几个slide,我用current,设置值,发现没有效果,始终都是第一张,有解决的么?

      发布在 Taro
      X
      xiangcaozhu
    • RE: ScrollView上拉加载更多和下拉刷新不起作用

      我也遇到这个问题,无法禁止微信默认的查看来源。禁用了下拉也会有问题。只能在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>
          )
        }
      }
      
      
      发布在 Taro
      X
      xiangcaozhu
    • RE: Taro组件Swiper组件,onChange中setState,时,会导致不停的调用

      Taro的swiper组件,onChange中怎么获取source的值??

      发布在 Taro
      X
      xiangcaozhu
    • Taro组件Swiper组件,onChange中setState,时,会导致不停的调用

      4ccc3f89-11cd-4169-b7d1-9ca4dd7aeb55-image.png

      问题:Taro中,Swiper中onChange,没有找到source字段

      发布在 Taro
      X
      xiangcaozhu