Taro: startPullDownRefresh 为什么h5下无效，下拉无反应，打包成app也无效，是有小程序可以？

Created on 20 May 2019  ·  16Comments  ·  Source: NervJS/taro

startPullDownRefresh 为什么h5下无效，下拉无反应，打包成app也无效，是有小程序可以？

picture blackRe

Most helpful comment

希望官方能把常用组件做个demo，用户一时可以参考，官方也好验证一下自己的东西功能是正常的

picture zhuxianguo on 17 Jun 2019
👍6

All 16 comments

欢迎提交 Issue~

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

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

Good luck and happy coding~

taro-bot[bot] picture taro-bot[bot] on 20 May 2019

贴一下代码

luckyadam picture luckyadam on 21 May 2019

CC @Littly

taro-bot[bot] picture taro-bot[bot] on 21 May 2019

贴一下代码

设置了可下拉直接调用的 Taro.startPullDownRefresh()

blackRe picture blackRe on 21 May 2019

什么版本？

Littly picture Littly on 23 May 2019

遇到相同的问题，版本：1.3.0-beta.5

benny-eu picture benny-eu on 30 May 2019

无法复现 需要具体代码

Littly picture Littly on 2 Jun 2019

我也用不来了，官方能不能给个类似这样的demo

目前已经发现：

  1. 使用startPullDownRefresh必须有onPullDownRefresh钩子
  2. startPullDownRefresh不能在生命周期componentDidShow里使用
  3. 依然用不起来

做个下拉刷新好难
image

guxingke201 picture guxingke201 on 4 Jun 2019 
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { AtFab, AtLoadMore } from 'taro-ui'
import { getArticleList } from '@actions/home'
import { getWindowHeight } from '@utils/style'
import './index.scss'
interface ArticleList {
  author: string
  coverImage: string
  createTime: string
  discription: string
  id: string
  readCount: number
  title: string
}
interface HomeState {
  articleList: ArticleList[]
  status: 'more' | 'loading' | 'noMore'
}
class Home extends Component {
  config = {
    navigationBarTitleText: '文章列表'
  }

  state: HomeState = {
    status: 'loading',
    articleList: []
  }
  pageData = {
    pageNo: 1,
    pageSize: 10
  }
  componentDidMount() {
    Taro.startPullDownRefresh()
    this.initData([])
  }
  onButtonClick = () => {
    Taro.navigateTo({
      url: `/pages/home/add/index`
    })
  }
  showDetail = () => {
    Taro.navigateTo({
      url: `/pages/home/detail/index`
    })
  }
  onClickLoadMore = () => {
    this.initData(this.state.articleList)
  }
  initData = articleList => {
    if (this.state.status === 'noMore') {
      return
    }
    this.setState({ status: 'loading' })
    getArticleList(this.pageData).then(resData => {
      this.setState({
        articleList: articleList.concat(resData.data),
        status: resData.count > this.pageData.pageNo * this.pageData.pageSize ? 'more' : 'noMore'
      })
      this.pageData.pageNo += 1
    })
  }
  onScrollToUpper = () => {
    console.log('onScrollToUpper....')
    this.pageData.pageNo = 1
    Taro.startPullDownRefresh()
    getArticleList(this.pageData).then(resData => {
      this.setState({
        articleList: resData.data
      })
      this.pageData.pageNo += 1
      Taro.stopPullDownRefresh()
    })
  }
  onPullDownRefresh() {
    console.log('onPullDownRefresh....')
    alert('onPullDownRefresh')
    // this.onScrollToUpper()
  }
  render() {
    const { articleList } = this.state
    return (
      <View>
        <ScrollView
          style={{ height: getWindowHeight() }}
          scrollY
          className='page-news-list'
          onScrollToLower={this.onClickLoadMore}
        >
          {articleList.map((item, index) => (
            <View className='news-item' onClick={this.showDetail}>
              <View className='taro-img item-img'>
                <Image
                  className='taro-img__mode-aspectfill'
                  mode='aspectFill'
                  lazyLoad
                  src={item.coverImage}
                />
              </View>
              <View className='item-content'>
                <View className='item-content-title'>
                  {index + 1}
                  {item.title}
                </View>
                <View className='item-content-meta'>
                  <View className='view-wrap'>
                    <Text className='taro-text at-icon at-icon-heart-2 view-icon' />
                    <Text className='taro-text view-num'>{item.readCount}</Text>
                  </View>
                  <View className='view-wrap'>
                    <Text className='taro-text at-icon at-icon-clock view-icon' />
                    <Text className='taro-text view-num'>{item.createTime}</Text>
                  </View>
                </View>
              </View>
            </View>
          ))}
          <AtLoadMore
            moreBtnStyle={{ display: 'none' }}
            onClick={this.onClickLoadMore}
            status={this.state.status}
          />
        </ScrollView>
        <View className='btn-fab'>
          <AtFab onClick={this.onButtonClick}>
            <Text className='at-fab__icon at-icon at-icon-camera' />
          </AtFab>
        </View>
      </View>
    )
  }
}

export default Home
guxingke201 picture guxingke201 on 4 Jun 2019

image

guxingke201 picture guxingke201 on 4 Jun 2019

微信不支持scrollview，改成使用page，入口backgroundTextStyle改成dark

还遗留问题：h5看不到动画。

这里的文档可能有点旧了：

image

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { AtFab, AtLoadMore } from 'taro-ui'
import { getArticleList } from '@actions/home'
import { getWindowHeight } from '@utils/style'
import './index.scss'
interface ArticleList {
  author: string
  coverImage: string
  createTime: string
  discription: string
  id: string
  readCount: number
  title: string
}
interface HomeState {
  articleList: ArticleList[]
  status: 'more' | 'loading' | 'noMore'
}
class Home extends Component {
  config = {
    enablePullDownRefresh: true,
    navigationBarTitleText: '文章列表'
  }
  state: HomeState = {
    status: 'loading',
    articleList: []
  }
  pageData = {
    pageNo: 1,
    pageSize: 10
  }
  initData = articleList => {
    this.setState({ status: 'loading' })
    return getArticleList(this.pageData)
      .then(resData => {
        this.setState({
          articleList: articleList.concat(resData.data),
          status: resData.count > this.pageData.pageNo * this.pageData.pageSize ? 'more' : 'noMore'
        })
        this.pageData.pageNo += 1
        Taro.stopPullDownRefresh()
      })
      .catch(() => {
        this.setState({ status: 'more' })
        Taro.stopPullDownRefresh()
      })
  }
  componentDidMount() {
    this.initData([])
  }
  onReachBottom() {
    if (this.state.status !== 'more') {
      return
    }
    this.initData(this.state.articleList)
  }
  onPullDownRefresh() {
    this.pageData.pageNo = 1
    this.initData([])
  }
  onButtonClick = () => {
    Taro.navigateTo({
      url: `/pages/home/add/index`
    })
  }
  showDetail = () => {
    Taro.navigateTo({
      url: `/pages/home/detail/index`
    })
  }
  render() {
    const { articleList } = this.state
    return (
      <View>
        <View className='page-news-list'>
          {articleList.map((item, index) => (
            <View className='news-item' onClick={this.showDetail}>
              <View className='taro-img item-img'>
                <Image
                  className='taro-img__mode-aspectfill'
                  mode='aspectFill'
                  lazyLoad
                  src={item.coverImage}
                />
              </View>
              <View className='item-content'>
                <View className='item-content-title'>
                  {index + 1}
                  {item.title}
                </View>
                <View className='item-content-meta'>
                  <View className='view-wrap'>
                    <Text className='taro-text at-icon at-icon-heart-2 view-icon' />
                    <Text className='taro-text view-num'>{item.readCount}</Text>
                  </View>
                  <View className='view-wrap'>
                    <Text className='taro-text at-icon at-icon-clock view-icon' />
                    <Text className='taro-text view-num'>{item.createTime}</Text>
                  </View>
                </View>
              </View>
            </View>
          ))}
          <AtLoadMore onClick={this.onReachBottom.bind(this)} status={this.state.status} />
        </View>
        <View className='btn-fab'>
          <AtFab onClick={this.onButtonClick}>
            <Text className='at-fab__icon at-icon at-icon-camera' />
          </AtFab>
        </View>
      </View>
    )
  }
}

export default Home
guxingke201 picture guxingke201 on 5 Jun 2019

希望官方能把常用组件做个demo，用户一时可以参考，官方也好验证一下自己的东西功能是正常的

zhuxianguo picture zhuxianguo on 17 Jun 2019
👍6

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

taro-bot[bot] picture taro-bot[bot] on 18 Nov 2019

H5这是老问题了, 一直都没有很好的解决这个问题. 很好复现的啊, 提的问题没有解决就被关闭了. 😿
image

giantss picture giantss on 21 Dec 2019

h5 的 下拉刷新有兼容计划？

GPWiOS picture GPWiOS on 18 Mar 2020

H5这是老问题了, 一直都没有很好的解决这个问题. 很好复现的啊, 提的问题没有解决就被关闭了. 😿
image
不需要复现也明白你说的是什么问题 ， 之前比较推崇taro , 现在连京东都卸载掉了 ， bug 漫天飞还高速迭代 ，你应该明白这是一个什么样的框架。

admiao picture admiao on 24 Jun 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

liuchuzhang picture liuchuzhang  ·  3Comments
zhuxianguo picture zhuxianguo  ·  3Comments
XT-0515 picture XT-0515  ·  3Comments
fuyue111 picture fuyue111  ·  3Comments
waahai picture waahai  ·  3Comments