小程序scoller-view实现跳转至顶部

207 阅读1分钟

今天在做小程序实现按钮返回至顶部时,总是不生效,查询了文档发现是scoller-top的值若两次都设为相同时置顶效果不能生效,在此,自己写了一个scoller-view至顶的功能

主要代码如下:

页面:

 <scroll-view
      scroll-y
      style="height: 75vh;"
      bindscroll="scroll"
      bindscrolltolower="scrolltolower"
      scroll-top="{{topNum}}"
    >
     <image
        bindtap="scrollTop"
        wx:if="{{floorstatus}}"
        class="scroll-top"
        src="../../images/details_Return top_icon@2xpng.png"
      />
  </scroll-view>

样式:

<style>
.scroll-top {
  position: fixed;
  bottom: 15%;
  right: 0;
  height: 4rem;
  width: 4rem;
}

</style>

逻辑:

<script>
    data = {
        topNum: -1,
      floorstatus:false,
    }
methods:{
       scroll(e) {
      if (e.detail.scrollTop > 300) {
        this.topNum = -1; // 是两次topNum不一致
        this.floorstatus = true;
      } else {
        this.floorstatus = false;
      }
    },
       scrollTop(e) {
      this.topNum = 0;
    }
}
 </script>

效果如下:

image.png