copy-u-back-top 返回顶部

copy-u-back-top 是基于 uView u-back-top 修改的返回顶部组件，用于长页面滑动一定距离后，出现返回顶部按钮。

基础用法

需要配合页面的 onPageScroll 生命周期获取 scrollTop。

<template>
  <view>
    <view class="content">
      <!-- 长内容 -->
    </view>
    <copy-u-back-top :scrollTop="scrollTop"></copy-u-back-top>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  }
}
</script>

Props

参数	说明	类型	默认值
mode	返回顶部的形状，circle-圆形，square-方形	String	'circle'
icon	自定义图标名称	String	'arrow-upward'
text	提示文字	String	-
duration	返回顶部滚动时间，单位ms	String | Number	100
scrollTop	页面滚动距离	String | Number	0
top	距离顶部多少距离显示，单位px	String | Number	400
bottom	返回顶部按钮到底部的距离，单位px	String | Number	100
right	返回顶部按钮到右边的距离，单位px	String | Number	20
zIndex	层级	String | Number	9
iconStyle	图标的样式，对象形式	Object	{color: '#909399', fontSize: '19px'}
customStyle	自定义外部样式	Object	-

Events

事件名	说明	回调参数
change	显示状态发生变化时触发	show (Boolean)
click	点击返回顶部按钮时触发	-

Slots

插槽名	说明
default	自定义返回顶部按钮的内容