startPullDownRefresh 为什么h5下无效，下拉无反应，打包成app也无效，是有小程序可以？ #3099
Assignees
Comments
|
欢迎提交 Issue~ 如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏 如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。 Good luck and happy coding~ |
|
贴一下代码 |
|
CC @Littly |
设置了可下拉直接调用的 Taro.startPullDownRefresh() |
|
什么版本？ |
|
遇到相同的问题，版本：1.3.0-beta.5 |
|
无法复现 需要具体代码 |
|
我也用不来了，官方能不能给个类似这样的demo 目前已经发现：
做个下拉刷新好难 |
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 |
|
|
|
微信不支持scrollview，改成使用page，入口backgroundTextStyle改成dark 还遗留问题：h5看不到动画。 这里的文档可能有点旧了：
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 |
|
希望官方能把常用组件做个demo，用户一时可以参考，官方也好验证一下自己的东西功能是正常的 |
|
Hello~ 您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。 如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。 Good luck and happy coding~ |
|
H5这是老问题了, 一直都没有很好的解决这个问题. 很好复现的啊, 提的问题没有解决就被关闭了. 😿 |
|
h5 的 下拉刷新有兼容计划？ |
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
startPullDownRefresh 为什么h5下无效，下拉无反应，打包成app也无效，是有小程序可以？
The text was updated successfully, but these errors were encountered: