Comments (13)
看到没有后面的一屏幕是白色的。每次第一次加载都是这样的。
from react-scroll-paged-view.
看到没有后面的一屏幕是白色的。每次第一次加载都是这样的。
默认懒加载下一屏,但是在touchEnd的时候,有个参数isMovingRender控制在touchMove结束时加载下一页,你需要加上,我demo里的这行配置
from react-scroll-paged-view.
我想这里isMovingRender默认为true可能好点,但我更多的情况是需要它为false @MichaelHao25
from react-scroll-paged-view.
已经添加了, <WrapView
onChange={this._onChange}
// onResponder={this._onResponder}
// renderHeader={this._renderTabBar}
// renderFooter={this._renderDot}
// tabBarPosition='top'
// hasAnimation={false}
// initialPage={0}
isMovingRender
// vertical={false}
// initialPage={1}
infinite
// locked
// autoPlay
>
{/* <View style={[Style.pageView, { backgroundColor: 'black' }]}>
head
page {0}
foot
*/}
{pageLists.map((val, ind) => {
return (
<InsideScrollView
key={ind}
text={ind + 1}
style={Style[pageItem_${ind % 3}
]}
/>
)
})}
from react-scroll-paged-view.
from react-scroll-paged-view.
现在我动态添加pagelists的时候,拖拽的动画也没了
from react-scroll-paged-view.
我上图
from react-scroll-paged-view.
from react-scroll-paged-view.
需求时用户打开这张页面,默认求情可能有十条数据,用户滑动到第九条的时候我就回去拉去下一页的数据
from react-scroll-paged-view.
但是拉取的新数据就没有滑动的动画了。
from react-scroll-paged-view.
import React, { Component } from 'react'
import {
StyleSheet,
Platform,
Text,
Dimensions,
NativeModules,
View,
ScrollView,
TouchableOpacity
} from 'react-native'
import PropTypes from 'prop-types'
import ScrollPagedView, { ViewPaged } from 'react-scroll-paged-view'
// import ScrollPagedView, { ViewPaged } from './../src'
let height = Dimensions.get('window').height
const width = Dimensions.get('window').width
if (Platform.OS === 'android') {
height -= NativeModules.StatusBarManager.HEIGHT
}
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
pageLists: ['blue', 'green', 'red',],
}
}
_onChange = (currentPage, prevPage) => {
const { pageLists } = this.state
console.log(currentPage, prevPage);
let length = pageLists.length;
if (currentPage + 1 == length) {
this.setState(prevState => {
let temp = prevState.pageLists;
temp.push(currentPage);
return {
pageLists: temp,
}
}
)
}
}
render() {
const WrapView = ScrollPagedView
// const WrapView = ViewPaged
const { pageLists } = this.state
console.log(pageLists);
return (
<View style={Style.container}>
<WrapView
onChange={this._onChange}
// onResponder={this._onResponder}
// renderHeader={this._renderTabBar}
// renderFooter={this._renderDot}
// tabBarPosition='top'
// hasAnimation={false}
// initialPage={0}
isMovingRender
// vertical={false}
// initialPage={1}
infinite
// locked
// autoPlay
>
{/* <View style={[Style.pageView, { backgroundColor: 'black' }]}>
<Text style={Style.text}>head</Text>
<Text style={Style.textIndex}>page {0}</Text>
<Text style={Style.text}>foot</Text>
</View> */}
{pageLists.map((val, ind) => {
return (
<InsideScrollView
key={ind}
text={ind + 1}
style={Style[`pageItem_${ind % 3}`]}
/>
)
})}
</WrapView>
</View>
)
}
}
class InsideScrollView extends Component {
static contextTypes = {
ScrollView: PropTypes.func,
}
render() {
const WrapView = this.context.ScrollView || ScrollView
const { text, style } = this.props
return (
<View style={{ flex: 1 }}>
<WrapView style={{ flex: 1 }}>
<View style={[Style.pageView, style]}>
<Text>{text}</Text>
</View>
</WrapView>
</View>
)
}
}
const Style = StyleSheet.create({
container: {
flex: 1,
height,
width,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
pageView: {
flex: 1,
backgroundColor: '#F5FCFF',
alignItems: 'center',
paddingVertical: 20,
justifyContent: 'space-between',
},
text: {
fontSize: 40,
color: 'white',
},
textIndex: {
fontSize: 80,
color: 'white',
},
pageItem_0: {
backgroundColor: 'blue',
height: height,
width,
},
pageItem_1: {
backgroundColor: 'green',
height: height,
width,
},
pageItem_2: {
backgroundColor: 'red',
height,
width,
},
tabBarContainer: {
minWidth: 50,
minHeight: 50,
backgroundColor: 'white',
borderColor: '#000',
flexDirection: 'row',
},
tabBarItem: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderBottomWidth: 4,
borderColor: 'transparent',
},
tabBarItemText: {
fontSize: 18,
color: 'gray',
},
dotContainer: {
position: 'absolute',
bottom: 80,
left: 100,
right: 100,
height: 10,
flexDirection: 'row',
},
dotItemView: {
height: 10,
width: 10,
borderRadius: 5,
backgroundColor: 'rgba(0, 0, 0, 0.6)',
},
})
from react-scroll-paged-view.
代码已经附上了。
from react-scroll-paged-view.
@MichaelHao25 已修复, 安装最新版本[email protected]
from react-scroll-paged-view.
Related Issues (7)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-scroll-paged-view.