返回顶部 BackTop

返回页面顶部的操作按钮，当页面过长用户需要返回页面顶部的时候使用；

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-back-top": "@titian-design/weapp/back-top/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-back-top": "platform://titian-mp/ti-back-top"
  }
}

基本用法

基本使用

• App.wxml
• index.js

code

copy

code

<ti-cell-group>
  <ti-cell
    wx:for="{{ list }}"
    wx:key="{{ index }}"
    title="向下滑动页面"
  ></ti-cell>
</ti-cell-group>

<ti-back-top  />

copy

code

Page({
  data: {
    list: Array(20).fill(1),
  },
});

基本使用

• App.wxml
• index.js

code

copy

code

<ti-cell-group>
  <ti-cell
    wx:for="{{ list }}"
    wx:key="{{ index }}"
    title="向下滑动页面"
  ></ti-cell>
</ti-cell-group>

<ti-back-top text="顶部"  />

copy

code

Page({
  data: {
    list: Array(20).fill(1),
  },
});

ti-back-top API

属性 Properties

名称	类型	必填	默认值	说明	备注
text	string	否	-	展示文字	-
visibility-height	number	否	-	滚动高度达到此参数值才出现 back-top	-
duration	number	否	300	回到顶部所需时间（ms）	-
use-slot	boolean	否	-	是否自定义内容，不会影响 text 的内容
icon	string | boolean	否 ｜ go-to-top	自定义图标，当为 false 时，不展示图标	-

事件 Events

名称	参数	说明	备注
bind:tap	-	点击后的回调函数	-

可扩展样式名 External Class

类名	说明	备注
ext-class	根节点可扩展的类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--back-top-z-index	10	-	-
--back-top-right	28px	-	-
--back-top-bottom	200px	-	-
--back-top-shadow	0 6px 20px 0 rgba(0, 0, 0, 0.06)	-	-
--back-top-bg-color	theme.color.gray.background.default	-	-
--back-top-width	96px	-	-
--back-top-height	96px	-	-
--back-top-border-radius	50%	-	-
--back-top-text-font-size	theme.fontSize.t2	文字大小	-
--back-top-text-color	theme.color.gray.texticon.900	文字颜色	-