uniapp scroll-view回到顶部

可以通过scroll-view组件的scroll-top属性实现回到顶部的功能。在需要回到顶部的事件触发时，将scroll-top属性设置为0即可。

示例代码：

<scroll-view scroll-top="{{scrollTop}}" scroll-y style="height: 200px;">
   <!-- scroll-view的内容 -->
</scroll-view>

<button bindtap="scrollTopTop">回到顶部</button>

data: {
  scrollTop: 0
},

scrollTopTop() {
 this.setData({
    scrollTop: 0
  })
}

相关问题

uniapp scroll-view 回到顶部

可以通过在scroll-view组件上绑定一个tap事件，然后在事件处理函数中调用scroll-view组件的scrollTo方法来实现回到顶部的功能。具体实现步骤如下：

1. 在scroll-view组件上绑定一个tap事件，例如：

<scroll-view class="scroll-view" scroll-y="true" @tap="backToTop">
  <!-- scroll-view的内容 -->
</scroll-view>

2. 在事件处理函数backToTop中调用scroll-view组件的scrollTo方法，将scrollTop设置为0，例如：

methods: {
  backToTop() {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300
    });
  }
}

其中，duration表示滚动到顶部的动画时间，单位为毫秒。

uniapp 点击 scroll-view 回到顶部

要实现在 Uniapp 中点击 `scroll-view` 回到顶部的功能，你可以按照以下步骤进行操作：

1. 在你的页面中，找到对应的页面文件（通常是 `.vue` 文件）。
2. 在模板中使用 `scroll-view` 组件来创建可滚动区域。例如：

<template>
 <div>
    <scroll-view ref="scrollView" :scroll-top="scrollTop" @scrolltoupper="handleScrollToUpper">
      <!-- 添加你的页面内容 -->
    </scroll-view>
    
    <button @click="backToTop">回到顶部</button>
  </div>
</template>

3. 在页面的 `<script>` 标签中，定义 `scrollTop` 数据和 `handleScrollToUpper` 方法来处理滚动到顶部的逻辑。具体步骤如下：

<script>
export default {
  data() {
    return {
      scrollTop: 0, // 滚动条距离顶部的距离
    };
  },
  methods: {
    handleScrollToUpper() {
      this.scrollTop = 0; // 滚动条滚动到顶部
    },
    backToTop() {
      const scrollView = this.$refs.scrollView;
      scrollView.scrollTo({
        scrollTop: 0, // 滚动到顶部所需的距离
        duration: 300, // 滚动到顶部所需的时间（单位：ms）
      });
    },
  },
};
</script>

在上述代码中，我们通过监听 `scrolltoupper` 事件来判断滚动条是否滚动到顶部，然后将 `scrollTop` 数据设置为 0 来实现回到顶部的效果。`backToTop` 方法利用 `scroll-view` 组件的 `scrollTo` 方法来实现平滑滚动到顶部的功能。