0.0.28 • Published 2 months ago
@flowlist/taro2-react-mobx v0.0.28
taro2-react-mobx
Install
yarn add mobx@5.15.7 @tarojs/mobx @tarojs/mobx-h5 @tarojs/mobx-rn
yarn add @flowlist/js-core @flowlist/taro2-react-mobx
ListView
import Taro, { PureComponent } from '@tarojs/taro'
import { View, Image, Block } from '@tarojs/components'
import { reactive, didMount, didUnmount, defaultProps, convertProps } from '@flowlist/taro2-react-mobx'
import Loading from '~/image/loading.gif'
import Nothing from '~/image/page_nothing.png'
import Error from '~/image/page_error.png'
@reactive
class ListView extends PureComponent {
componentDidMount () {
didMount(this, {
className: 'list-view__shim'
})
}
componentWillUnmount () {
didUnmount(this)
}
render () {
const { showError, showNoMore, showLaunch, showNothing, errorMessage } = convertProps(this)
return (
<View className='list-view'>
{
showLaunch ? (
<View className='list-view__state'>
<Image className='list-view__img' mode='aspectFit' src={Loading} />
</View>
) : showNothing ? (
<View className='list-view__state'>
{
this.props.launch && <Block>
<Image className='list-view__img' mode='aspectFit' src={Nothing} />
<View className='list-view__txt'>这里什么都没有</View>
</Block>
}
</View>
) : showError ? (
<View className='list-view__state'>
<Image className='list-view__img' mode='aspectFit' src={Error} />
<View className='list-view__txt'>{ errorMessage }</View>
</View>
) : <Block>
{this.props.children}
{
showNoMore && <View className='list-view__tip'>没有更多了</View>
}
</Block>
}
<View className='list-view__shim' />
</View>
)
}
}
ListView.defaultProps = defaultProps
export default ListView
ListRender
import Taro, { PureComponent } from '@tarojs/taro'
import { createStore, reactive } from '@flowlist/taro2-react-mobx'
import ListView from '~/components/ListView'
import ListItem from '~/components/ListItem'
import { getData } from '~/utils/api'
@reactive
export default class extends PureComponent {
constructor(props) {
super(props)
this.store = createStore()
this.params = {
func: getData
}
}
render () {
return (
<ListView store={this.store} params={this.params}>
{
this.store.state.result.map(item => (
<ListItem
key={item.slug}
item={item}
params={this.props.params}
/>
))
}
</ListView>
)
}
}
Params
Name | Type | Default | Description |
---|---|---|---|
* func | function | - | 请求接口的函数,返回一个\<Promise> |
type | string | auto | 场景 值中的 type:jump 、page 、sinceId 、seenIds |
query | object | - | 需要透传到 API 层的数据 |
uniqueKey | string | id | 每个元素在 v-for 的时候都需要一个 key,这个参数是 key 的键名 |
- more detail:docs
ListView Props
More detail
@flowlist/js-core @flowlist/vue-listview
Test
License
0.0.23
2 months ago
0.0.24
2 months ago
0.0.25
2 months ago
0.0.26
2 months ago
0.0.27
2 months ago
0.0.28
2 months ago
0.0.21
2 months ago
0.0.22
2 months ago
0.0.20
2 months ago
0.0.19
3 years ago
0.0.18
3 years ago
0.0.17
3 years ago
0.0.15
3 years ago
0.0.16
3 years ago
0.0.10
3 years ago
0.0.11
3 years ago
0.0.12
3 years ago
0.0.13
3 years ago
0.0.14
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago