iscroll-luo

iscroll-luo copied to clipboard

上拉刷新和下拉加载给个开关配置吧

OK

@1.2.1 加了4个属性

<Luo
    noDown={true} // 关闭下拉刷新 默认false
    noUp={true} // 关闭上拉加载 默认false
    noDownStr={'下拉刷新已关闭'} // 关闭下拉后，下拉刷新区域显示的文字 默认无
   noUpStr={'已全部加载完毕'} //关闭上拉后，上拉加载区域显示的文字 默认无
>
...
</Luo>

那个图标也会隐藏吧？我现在是覆盖你的样式强制隐藏的^_^

图标漏出来了吗，我记得我隐了哦。

刚试了一下， 箭头不转了...

是不转了，但是会报警告：

Warning: Unsafe legacy lifecycles will not be called for components using new component APIs.

e uses getDerivedStateFromProps() but also contains the following legacy lifecycles:
  componentWillMount
  componentWillReceiveProps

The above lifecycles should be removed. Learn more about this warning here:

那个我已经修了。 警告是因为我用React16.4编译的。为了向下兼容，保留了componentWillReceiveProps的调用方法。 不用管，正式打包就没了

还有，第一次调用下拉刷新的时候如果没有请求到数据，执行一下this.setState({})方法，就是说state没有有效更新，刷新中的状态一直在那里转。

这样写呢?：

// 原始数据为空数组
this.state = {
    data: []
}

// 请求数据仍然为空，则依然如下调用一下setState：
this.setState({
    data: [],
})

我试过，这样也不行，数据没变，this.props.children就没有变化，是不是应该在组件内部加一个是否是首次调用下拉刷新的状态来判断。

我刚试了一下没出现这个问题, 我的children部分是这样写的：

<Luo>
{
    this.state.data.map((item, index)=>{
        return <div key={index}>...</div>
   })
}
</Luo>

你的children部分是怎么渲染的呢？

这是一个聊天页面，我又把组件还原到1.1.0版本了，刷新中的状态目前只能通过设置style为none来隐藏。

<IscrollHz id='scroll-box' onPullDownRefresh={this.getHistoryData.bind(this)}>
            {
              this.state.messages.length > 0 && this.state.messages.map((message,key) => {
                if (message._attributes.from !== `${chatRoomJid}/${user.name}`) {
                  return <li className="recv-box" key={key}>
                    {shoudShowTime(message._attributes.date,key) && <div className="chat-time"><span>{formatTime(message._attributes.date)}</span></div>}
                    {
                      (message.body._text !== '' || (message.body.type && message.body.type._text) )&&
                      <div className="recv-content-box">
                        <div className="avatar">
                          <img src="/images/order/logo.png" alt=""/>
                        </div>
                        <Card message={message} refresh={this.refresh.bind(this)}/>
                      </div>
                    }
                  </li>
                } else {
                  return <li className="send-box" key={key}>
                    {shoudShowTime(message._attributes.date,key) && <div className="chat-time"><span>{formatTime(message._attributes.date)}</span></div>}
                    <div className="send-content-box">
                      <div className="send-content">
                        <div className="msg-content">{message.body.content && message.body.content['_text']} {message.body['_text']}</div>
                        {
                          message.body.extend && message.body.extend.url && message.body.extend.name && <div className="extend">
                            <a href={message.body.extend.url['_text']}>{message.body.extend.name['_text']}</a>
                          </div>
                        }
                      </div>
                      <div className="avatar">
                        <img src="/images/order/fb.png" alt=""/>
                      </div>
                    </div>
                  </li>
                }
              })
            }
          </IscrollHz>

那你试试这样写：

<IscrollHz>
 {
  this.state.messages.length ? (this.state.messages.map(...)) : []
}
</IscrollHz>

用三元操作符，没有数据则返回一个空数组

不过这确实是一个问题，我回头考虑一下解决方法

要不你在组件里添加一个属性，你根据这个属性来判断是否已加载完，我在外层组件更新传入的值，比如这样:

<IscrollHz id='scroll-box'  isUpdated={isUpdated} >
......
</IscrollHz>

//我的回调
this.setState({isUpdated: true})