微信小程序里面的 Component observers 转换后不会生效吗？

[chenfaxiang]

微信小程序里面的 component observers
；
在使用 Taro 转换之后变成了这样

这种情况下这个转换之后的 _observerProps 里面始终没有被触发，是不支持吗？

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[yuche]

发一下你整个转换后代码过来

[yuche]

用三个点包起来，不行就把你的文件拖到�回复的编辑窗口

[chenfaxiang]

import { Block, View, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import withWeapp from '@tarojs/with-weapp'
import { isWxApp, swipeDirection } from '@/utils'
import TjNullContent from '../nullContent/nullContent'
import './list.scss'

@withWeapp('Component')
class _C extends Taro.Component {
  static defaultProps = {
    isLoading: false,
    isEnd: false,
    endText: 'End',
    isNullContent: false,
    isError: false,
    nullTitle: '',
    nullText: '',
    btnText: '',
    errorText: '',
    errorTitle: '',
    nullIcon: '',
    scrollTop: 0,
    heightValue: '100vh',
    isPullDown: true,
    isClosePullDown: false,
    isScroll: false
  }
  static options = {
    // 在组件定义时的选项中启用多slot支持
    multipleSlots: true
  }
  _observeProps = [
    {
      name: 'isClosePullDown',
      observer: () => {
        this.stopPullDownRefesh()
      }
    }
  ]
  state = {
    // 是否是微信小程序
    isWxApp,
    // 是否开启下拉刷新
    isPullDownRefesh: false,
    // 是否下拉刷新结束
    isRefeshEnd: false
  }
  scrollViewTop = 0
  stopPullDownRefesh = () => {
    this.setData({
      isRefeshEnd: true
    })

    setTimeout(() => {
      this.setData({
        isPullDownRefesh: false
      })
    }, 1000)
  }
  errorBtnHandle = () => {
    !!this.props.onErrorBtnHandle && this.props.onErrorBtnHandle()
  }
  bindscrolltolower = () => {
    !!this.props.onScrolltolowerChange && this.props.onScrolltolowerChange()
  }
  scrollChange = e => {
    this.scrollViewTop = e.detail.scrollTop

    if (this.properties.isScroll) {
      !!this.props.onGetScrollTop && this.props.onGetScrollTop(e.detail.scrollTop)
    }
  }
  touchStart = e => {
    if (!this.properties.isPullDown) return
    const touches = e.changedTouches ? e.changedTouches[0] : {}
    this.tStart = touches
  }
  touchEnd = e => {
    if (!this.properties.isPullDown) return
    this.scrollViewTop = this.scrollViewTop || 0
    if (this.scrollViewTop <= 0 && !this.data.isPullDownRefesh) {
      const touches = e.changedTouches ? e.changedTouches[0] : {}
      const start = this.tStart
      const direction = swipeDirection(
        start.pageX,
        touches.pageX,
        start.pageY,
        touches.pageY
      )
      if (direction === 'Down' && Math.abs(start.pageY - touches.pageY) > 80) {
        this.setData({
          isRefeshEnd: false,
          isPullDownRefesh: true
        })

        setTimeout(() => {
          !!this.props.onPullDownRefesh && this.props.onPullDownRefesh()
        }, 500)
      }
    }
  }
  config = {
    component: true
  }

  render() {
    const {
      isLoading: isLoading,
      isEnd: isEnd,
      endText: endText,
      isNullContent: isNullContent,
      isError: isError,
      nullTitle: nullTitle,
      nullText: nullText,
      btnText: btnText,
      errorText: errorText,
      errorTitle: errorTitle,
      nullIcon: nullIcon,
      scrollTop: scrollTop,
      heightValue: heightValue,
      isPullDown: isPullDown,
      isClosePullDown: isClosePullDown,
      isScroll: isScroll
    } = this.props

    console.log('---isClosePullDown:', isClosePullDown)
    const {
      isPullDownRefesh: isPullDownRefesh,
      isRefeshEnd: isRefeshEnd
    } = this.state
    
    return (
      <View className='list-component'>
        <View
          className='list-loading'
          style={'height:' + (isPullDownRefesh ? '80rpx' : 0)}
        >
          {!isRefeshEnd && (
            <View className='loading-icon'></View>
          )}
          {isRefeshEnd && (
            <View className='loading-text'>刷新成功</View>
          )}
        </View>
        {!isLoading && (isError || isNullContent) ? (
          <View onTouchStart={this.touchStart} onTouchEnd={this.touchEnd}>
            <TjNullContent
              title={!isError ? nullTitle : errorTitle}
              text={!isError ? nullText : errorText}
              btnText={btnText}
              onErrorBtnHandle={this.errorBtnHandle}
            ></TjNullContent>
          </View>
        ) : (
          <Block>
            <ScrollView
              style={'height:' + heightValue}
              onScroll={this.scrollChange}
              scrollY
              onScrollToLower={this.bindscrolltolower}
              scrollTop={!!scrollTop ? scrollTop : ''}
              trapScroll
              enableBackToTop='true'
              lowerThreshold='200'
            >
              <View
                style={'min-height:' + heightValue}
                onTouchStart={this.touchStart}
                onTouchEnd={this.touchEnd}
              >
                <View className='list-content-contaniner'>
                  {this.props.children}
                </View>
                <View className='list-loading-contaniner'>
                  {isEnd && !isLoading && <Block>{isEnd ? endText : ''}</Block>}
                  {isLoading && !isPullDownRefesh && (
                    <Block>
                      <View className='loading-icon'></View>
                    </Block>
                  )}
                </View>
              </View>
            </ScrollView>
          </Block>
        )}
      </View>
    )
  }
}

export default _C

[chenfaxiang]

@yuche 处理了，帮忙看一下吧。

[chenfaxiang]

@yuche 兄弟，我更新了 taro 到 1.3.9 ，但是 _observeProps 在开发者工具里还是不会触发。

_observeProps = [
    {
      name: 'isClosePullDown',
      observer: () => {
        this.stopPullDownRefesh()
      }
    }
  ]

[yuche]

61ac83c 没有发布到 1.3.9

[chenfaxiang]

@yuche 这个能帮忙处理一下吗？

[yuche]

等发 1.3.10

[chenfaxiang]

@yuche 好的。。

[chenfaxiang]

@yuche 兄弟，又来打扰你了，我问一下，这个 1.3.10 的发布时间是什么时候啊？

[yf287]

1.3.11，我还是会有这个问题

[chenfaxiang]

我这边发现的情况是在首次进入页面不会触发，当你在该页面进入其子页面之类的再返回时就会触发了，这里的原因我也没搞清楚；我现在的处理方式是在首次进入页面的时候主动触发了一次

[chenfaxiang]

@yf287

[originrobot]

请问这个问题有解决方案了吗？
Taro在子组件里监听父组件传过来的props的变化，有标准做法吗？