首页回到顶部按钮 review by 陈林

@@ -56,6 +56,8 @@ export default class Home extends Component {
     constructor(props) {
         super(props);
 
+        this.state = {showBackTop: false};
+
         this._renderRow = this._renderRow.bind(this);
         this._renderFooter = this._renderFooter.bind(this);
         this.trigggePullToRefresh = this.trigggePullToRefresh.bind(this);
@@ -63,6 +65,8 @@ export default class Home extends Component {
         this._currentChannelData = this._currentChannelData.bind(this);
         this._renderSectionHeader = this._renderSectionHeader.bind(this);
         this._autoScrollToProductList = this._autoScrollToProductList.bind(this);
+        this._onScroll = this._onScroll.bind(this);
+        this._backTop = this._backTop.bind(this);
 
         this.dataSource = new ListView.DataSource({
             rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
@@ -379,7 +383,7 @@ export default class Home extends Component {
                         onPressTitleMore={this.props.onPressTitleMore}
                     />
                 )
-            }            
+            }
             case 'vipUse':{
                 return (
                     <VipUserFloor
@@ -418,6 +422,19 @@ export default class Home extends Component {
         this.props.onClickRecommendProduct&&this.props.onClickRecommendProduct()
     }
 
+    _onScroll(event) {
+        if (event.nativeEvent.contentOffset.y < height) {
+            this.setState({showBackTop: false});
+        }else {
+            this.setState({showBackTop: true});
+        }
+    }
+
+    _backTop() {
+        this.setState({showBackTop: false});
+        this.listView && this.listView.scrollTo({x: 0, y: 0, animated: true});
+    }
+
     _renderFooter() {
         let data = this._currentChannelData();
         let {isFetching, endReached, list, cached, favorite, isListFetching} = data;
@@ -499,6 +516,7 @@ export default class Home extends Component {
                             this.props.onEndReached && this.props.onEndReached();
                         }}
                         renderFooter={this._renderFooter}
+                        onScroll={this._onScroll}
                     />
                     :
                     <ListView
@@ -527,6 +545,7 @@ export default class Home extends Component {
                             this.props.onEndReached && this.props.onEndReached();
                         }}
                         renderFooter={this._renderFooter}
+                        onScroll={this._onScroll}
                     />
                 }
 
@@ -537,6 +556,24 @@ export default class Home extends Component {
                         this._autoScrollToProductList();
                     }}
                 />
+
+                {
+                    this.state.showBackTop ?
+                    <TouchableOpacity
+                        activeOpacity={1}
+                        onPress={() =>{
+                            this._backTop();
+                        }}
+                    >
+                        <Image
+                            style={styles.backTop}
+                            source={require('../../images/backToTop.png')}
+                        />
+                    </TouchableOpacity>
+                    :
+                    <View/>
+                }
+
             </View>
         );
     }
@@ -584,4 +621,13 @@ let styles = StyleSheet.create({
         marginTop: 15,
         marginBottom: 15
     },
+
+    backTop: {
+        position: 'absolute',
+        right: 13 * DEVICE_WIDTH_RATIO,
+        bottom: 13 * DEVICE_WIDTH_RATIO,
+        width: 44,
+        height: 44,
+    }
+
 });