Vue与小程序的返回顶部记录

默认返回顶部按钮是隐藏，滚动一段距离后才显示

VUE 返回顶部

methods:{
//返回顶部
  backTop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }, 
},
//生命周期函数
 mounted() {   
    window.addEventListener("scroll", () => {            
      let h = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (h > 300 && !this.top) {
        this.top=true;   //显示按钮
      }
      if (h < 300 && this.top) {
        this.top=false; 
      }
    });
  }

小程序 返回顶部

<view class="back-top" bindtap='jump_top' wx:if="{{up_btn}}">
<van-icon name="arrow-up" size="26px" />
</view>

//生命周期函数
 onPageScroll: function (e) {
    let h = e.scrollTop
    if (h > 300 && !this.data.up_btn) { 
      this.setData({
        up_btn: true
      });
    }
    if (h < 300 && this.data.up_btn) { 
      this.setData({
        up_btn: false
      });
    } 
  },
  jump_top(){
    this.setData({
      up_btn: false
    });
    wx.pageScrollTo({
      scrollTop: 0
    })
  }