用iconfont默认样式:
<GoTop />
自定义样式:
<GoTop name="click" icon="//gtms03.alicdn.com/tps/i3/TB1rrfVJVXXXXalXXXXGEZzGpXX-40-40.png" />
注:weex 环境下必须把 GoTop 放在 ScrollView 的第一个位置
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| name | String | Top | 图标文字内容 |
| icon | String | 内部默认图标 | 图标 Icon URL |
| iconWidth | String | 90 | 返回顶部container宽度 |
| iconHeight | String | 90 | 返回顶部container高度 |
| borderColor | String | rgba(0, 0, 0, 0.1) | 返回顶部container border颜色 |
| bottom | int | 80 | 离底部的距离 |
| onShow | function | function() {} | icon显示回调 |
| onHide | function | function() {} | icon消失回调 |
// demo
import { createElement, render, Component } from 'rax';
class GoTopDemo extends Component {
render() {
return (
<ScrollView ref={(scrollview) => {
this.scrollview = scrollview;
}}>
<GoTop name="顶部" 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 />);