主页（六）-控制页面回到顶部——点击返回顶部按钮-e.scrollTop

回到顶部——点击返回顶部按钮-e.scrollTop

• 按钮样式

<!-- 回到顶部 -->
<div class="top">
  ︿
  <p>顶部</p>
</div>

.top {
  position: fixed;
  bottom: 50rpx;
  right: 50rpx;
  border-radius: 50rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  display: none;
}

• 回到顶部功能实现

toTopHandle () {
  // 控制回到顶部
  mpvue.pageScrollTo({
    scrollTop: 0
  })
}

onPageScroll (event) {
  // 小程序生命周期函数，监控页面的滚动
  // 如果滚动指定大小，那么就控制显示或隐藏
  this.isShow = event.scrollTop > 50
}

实例

在home/index.vue中,

结构

    <!-- 回到顶部 -->
    <div class="totop" v-if='isShow' @click='handleTop'>
      ︿
      <p>顶部</p>
    </div>

样式

.totop {
  position: fixed;
  bottom: 50rpx;
  right: 50rpx;
  border-radius: 50rpx;
  width: 100rpx;
  height: 100rpx;
  background: rgb(255, 255, 255, 0.5);
  text-align: center;
  font-size: 14px;
    //默认是隐藏的
  //  display:none
}

数据和逻辑

export default {
  data () {
    return {
      // 控制回到顶部按钮的显示与否
      isShow: false
    }
  },
  onPageScroll (e) {
    // 监听页面的滚动
    // console.log(e.scrollTop)  显示具体数值
    this.isShow = e.scrollTop > 100
  },
  methods: {
    handleTop () {
      // 控制页面  点击返回按钮  回到顶部
      wx.pageScrollTo({
        scrollTop: 0
      })
    },
  }
}

显示效果