rax-gotop

Gotop

Install

$ npm install --save rax-gotop

Import

import GoTop from 'rax-gotop';

default style：

<GoTop />

user defined style：

<GoTop name="click" icon="//gtms03.alicdn.com/tps/i3/TB1rrfVJVXXXXalXXXXGEZzGpXX-40-40.png" />

Note: weex environment must be placed in the first position of ScrollView

Props

name	type	default	describe
name	String	Top	icon text content
icon	String	default icon	icon URL
iconWidth	String	90	container width
iconHeight	String	90	container height
borderColor	String	rgba(0, 0, 0, 0.1)	container border color
bottom	int	80	distance from bottom
onShow	function	function() {}	icon display callback
onHide	function	function() {}	icon disappear callback

Example

// demo
import { createElement, render, Component } from 'rax';
import GoTop from 'rax-gotop';
import ScrollView from 'rax-scrollview';
import Text from 'rax-text';
 
class GoTopDemo extends Component {
  render() {
    return (
      <ScrollView ref={(scrollview) => {
          this.scrollview = scrollview; 
        }}>
        <GoTop name="Top" style={{width: 100, height: 100}}
          onTop={() => { 
            this.scrollview.scrollTo({y: 0});
          }}
          icon="//gtms03.alicdn.com/tps/i3/TB1rrfVJVXXXXalXXXXGEZzGpXX-40-40.png" />
        {Array.from({length: 50}).map((_, idx) => (
          <Text style={{fontSize: 50}}>hello world {idx}</Text>
        ))}
      </ScrollView>
    );
  }
}
 
render(<GoTopDemo />);