uniapp小程序返回顶部
时间: 2023-10-28 22:05:38 浏览: 89
uniapp小程序瀑布流组件包
可以通过uni-app自带的scroll-view组件实现返回顶部的功能。具体实现方法如下:
1. 在scroll-view组件中添加一个按钮,用于返回顶部。
2. 给按钮添加点击事件,当点击按钮时,通过scroll-view组件的scroll-top属性将滚动条滚动到顶部。
示例代码如下:
```
<template>
<view class="container">
<scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop">
<!-- 此处省略scroll-view中的内容 -->
</scroll-view>
<view class="back-to-top" @click="backToTop">返回顶部</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0 // 初始滚动条位置为0
}
},
methods: {
backToTop() {
this.scrollTop = 0 // 将滚动条滚动到顶部
}
}
}
</script>
<style>
.container {
position: relative;
height: 100vh;
}
.scroll-view {
height: calc(100vh - 100rpx);
}
.back-to-top {
position: absolute;
bottom: 20rpx;
right: 20rpx;
width: 100rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
background-color: #333;
color: #fff;
border-radius: 50%;
}
</style>
```
阅读全文