uniapp实现回到顶部功能

最新推荐文章于 2024-08-05 14:24:00 发布

海尔波普z

最新推荐文章于 2024-08-05 14:24:00 发布

阅读量330

点赞数 2

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/qq_38937194/article/details/140658186

版权

HTML：

<view v-if="showTopBtn==1" class="topClass" @click="Totop">
    <up-icon name="arrow-upward" color="#ffffff" size="28"></up-icon>
</view>

JS：

import {
    reactive,
    ref
  } from 'vue';

let showTopBtn = ref(0)

  onPageScroll((e) => {
    console.log('页面滚动距离：', e.scrollTop);
    if (e.scrollTop > 600) {
      showTopBtn.value = 1
    } else {
      showTopBtn.value = 0
    }
  })


  //滚动到页面的目标位置
  function Totop() {
    uni.pageScrollTo({
      scrollTop: 0, //滚动到页面的目标位置
      duration: 300
    });
  }

css:

.topClass {
    position: fixed;
    bottom: 120rpx;
    right: 30rpx;
    background-color: rgba(0,0,0,0.5);
    padding: 20rpx;
    width: 44rpx;
    height: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40rpx;
  }