本文主要是介绍uView BackTop 返回顶部，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
#基本使用
由于返回顶部需要实时监听滚动条的位置，从而判断返回的按钮该出现还是隐藏，由于组件无法得知页面的滚动条信息，只能在页面的onPageScroll生命周期 中获得滚动条的位置，故需要在页面监听onPageScroll生命周期，实时获得滚动条的位置，通过Props传递给组件。
<template><view class="wrap"><text>滑动页面，返回顶部按钮将出现在右下角</text><u-back-top :scroll-top="scrollTop"></u-back-top></view>
</template><script>
export default {data() {return {scrollTop: 0}},onPageScroll(e) {this.scrollTop = e.scrollTop;}
};
</script><style lang="scss" scoped>.wrap {height: 200vh;}
</style>
copy
#改变返回顶部按钮的出现时机
可以通过top参数，修改页面滚动多少距离时，出现返回顶部的按钮
<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
copy
#自定义返回顶部的图标和提示
- 通过
icon修改返回顶部按钮的图标，可以是uView内置的图标，或者图片路径 - 通过
text参数修改返回顶部按钮的文字提示信息，如果需要修改文字的颜色和大小，可以通过customStyle参数
<u-back-top :scroll-top="scrollTop" icon="arrow-up" text="返回"></u-back-top>
copy
#其他自定义样式
- 通过
iconStyle参数自定义图标的样式，比如颜色，大小等 - 通过
customStyle修改返回按钮的背景颜色，大小等 - 通过
mode修改按钮的形状，circle为圆形，square为方形
注意：如果通过icon参数传入图片路径的话，需要通过iconStyle参数设置图片的width和height属性
<template><view class="wrap"><text>滑动页面，返回顶部按钮将出现在右下角</text><u-back-top :scrollTop="scrollTop" :mode="mode" :iconStyle="iconStyle"></u-back-top></view>
</template><script>
export default {data() {return {scrollTop: 0,mode: 'square',iconStyle: {fontSize: '32rpx',color: '#2979ff'}}},onPageScroll(e) {this.scrollTop = e.scrollTop;}
};
</script><style lang="scss" scoped>.wrap {height: 200vh;}
</style>这篇关于uView BackTop 返回顶部的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
