小程序uniapp 回到页面顶部

小程序uniapp 回到页面顶部

官网地址：https://uniapp.dcloud.io/component/scroll-view

实现的效果如下图所示（样式有点丑 可以自己调）

HTML部分

     <scroll-view
        scroll-y
        class="store_scroll"
        :lower-threshold="20"
        :scroll-top="scrollTop"
        @scroll="scrollEvent"
        @scrolltolower="loadMore">
        <view>内容</view>
     </scroll-view>

	 <view class="top-back" @click="topBack" v-if="isShow">
	     <view class="gotoback">回到顶部</view>
	 </view>

CSS部分

.top-back {
    position: fixed;
    right: 0;
    background-color: #00c47f;
    top: 70%;
    height: 50px;
    line-height: 50px;
    z-index: 999;
    color: #fff;
    border-radius: 45rpx;
    width: 95rpx;
    .gotoback {
      font-size: 22rpx;
      text-align: center;
    }
  }

JS部分

data() {
    return {
      isShow: false,
      scrollTop: 0,
      }
}

scrollEvent(e) {//根据距离顶部距离是否显示回到顶部按钮
      if (this.scrollTop === 0) {
        this.scrollTop = e.detail.scrollTop;
      }
      if (e.detail.scrollTop > 200) {//当距离大于200时显示回到顶部按钮
          this.isShow = true;
      } else {//当距离小于200时显示回到顶部按钮
          this.isShow = false;
      }
    },
    // 点击返回顶部按钮 跳回顶部
    topBack() {
      this.scrollTop = 0;
      this.$forceUpdate();
    },

最后

以上就是苗条店员为你收集整理的小程序uniapp 回到页面顶部的全部内容，希望文章能够帮你解决小程序uniapp 回到页面顶部所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。