Indicator move with ViewPager scroll

react-xx · Oct 9, 2015 · f1288af · f1288af
1 parent fbf8f9c
commit f1288af
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 11 deletions.
diff --git a/DataRepository.js b/DataRepository.js
@@ -92,7 +92,7 @@ DataRepository.prototype.fetchStories = function(date?: Date,
   if (!date) {
     date = new Date();
     reqUrl = API_LATEST_URL;
-    topData = this._safeStorage(KEY_THEME_TOPDATA);
+    topData = this._safeStorage(KEY_THEME_TOPDATA+ '0');
   } else {
     var beforeDate = new Date(date);
     beforeDate.setDate(date.getDate() + 1);

diff --git a/DefaultViewPageIndicator.js b/DefaultViewPageIndicator.js
@@ -72,9 +72,11 @@ var DefaultViewPageIndicator = React.createClass({
     var itemWidth = DOT_SIZE + (DOT_SAPCE * 2);
     var offset = (this.state.viewWidth - itemWidth * pageCount) / 2 + itemWidth * this.props.activePage;
 
-    var left = offset; /*this.state.offsetX.interpolate({
-      inputRange: [0, 1], outputRange: [0, offset]
-    });*/
+    //var left = offset;
+    var offsetX = itemWidth * (this.props.activePage - this.props.scrollOffset);
+    var left = this.props.scrollValue.interpolate({
+      inputRange: [0, 1], outputRange: [offsetX, offsetX + itemWidth]
+    })
 
     var indicators = [];
     for (var i = 0; i < pageCount; i++) {

diff --git a/ViewPager.js b/ViewPager.js
@@ -93,6 +93,11 @@ var ViewPager = React.createClass({
         this.state.scrollValue.setValue(offsetX);
       },
     });
+
+    if (this.props.isLoop) {
+      this.state.childIndex = 1;
+      this.state.scrollValue.setValue(1);
+    }
   },
 
   componentDidMount() {
@@ -122,7 +127,7 @@ var ViewPager = React.createClass({
   },
 
   goToPage(pageNumber) {
-    console.log('goToPage: ', pageNumber);
+
     var pageCount = this.props.dataSource.getPageCount();
     if (pageNumber < 0 || pageNumber >= pageCount) {
       console.error('Invalid page number: ', pageNumber);
@@ -152,10 +157,18 @@ var ViewPager = React.createClass({
     var scrollStep = (moved ? step : 0) + this.state.childIndex;
 
     this.state.fling = true;
+
+    var nextChildIdx = 0;
+    if (pageNumber > 0 || this.props.isLoop) {
+      nextChildIdx = 1;
+    }
+
     Animated.spring(this.state.scrollValue, {toValue: scrollStep, friction: 10, tension: 50})
       .start((event) => {
         if (event.finished) {
           this.state.fling = false;
+          this.state.childIndex = nextChildIdx;
+          this.state.scrollValue.setValue(nextChildIdx);
           this.setState({
             currentPage: pageNumber,
           });
@@ -194,7 +207,6 @@ var ViewPager = React.createClass({
   },
 
   render() {
-    console.log('render()', this.state.currentPage);
     var dataSource = this.props.dataSource;
     var pageIDs = dataSource.pageIdentities;
 
@@ -231,19 +243,19 @@ var ViewPager = React.createClass({
     }
 
     var sceneContainerStyle = {
-      width: this.state.viewWidth * pagesNum,
+      width: viewWidth * pagesNum,
       flex: 1,
       flexDirection: 'row'
     };
 
-    this.state.childIndex = hasLeft ? 1 : 0;
-    this.state.scrollValue.setValue(this.state.childIndex);
+    // this.state.childIndex = hasLeft ? 1 : 0;
+    // this.state.scrollValue.setValue(this.state.childIndex);
     var translateX = this.state.scrollValue.interpolate({
       inputRange: [0, 1], outputRange: [0, -viewWidth]
     });
 
     return (
-      <View style={{flex: 1, width: deviceWidth, backgroundColor: '#FCF4FF'}}
+      <View style={{flex: 1}}
         onLayout={(event) => {
             // console.log('ViewPager.onLayout()');
             var viewWidth = event.nativeEvent.layout.width;
@@ -266,6 +278,7 @@ var ViewPager = React.createClass({
                             pageCount: pageIDs.length,
                             activePage: this.state.currentPage,
                             scrollValue: this.state.scrollValue,
+                            scrollOffset: this.state.childIndex,
                           })}
       </View>
     );

diff --git a/index.android.js b/index.android.js
@@ -46,7 +46,7 @@ var RCTZhiHuDaily = React.createClass({
       () => {
         this.setState({splashed: true});
       },
-      2000,
+      20,
     );
   },
   RouteMapper: function(route, navigationOperations, onComponentRef) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ var RCTZhiHuDaily = React.createClass({ @@
           () => {
             this.setState({splashed: true});
           },
-,
+,
         );
       },
       RouteMapper: function(route, navigationOperations, onComponentRef) {
@@ Expand Down @@