文档中心 > 淘应用文档

淘应用-组件-数据展示组件-Gotop 返回顶部

更新时间:2018/01/10 访问次数:273

Gotop 返回顶部

用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 />);

FAQ

关于此文档暂时还没有FAQ
返回
顶部