What are the two ways to return to the top of the mini program?

There are two ways to return to the top of the mini program, namely:

(Learning recommendation: Programming Video)

1. Use the view form to return to the top

HTML:

<image src=&#39;../../img/button-top.png&#39; class=&#39;goTop&#39; hidden=&#39;{{!floorstatus}}&#39; bindtap="goTop"></image>

CSS:

/* 返回顶部 */
.goTop{
  height: 80rpx;
  width: 80rpx;
  position: fixed;
  bottom: 50rpx;
  background: rgba(0,0,0,.3);
  right: 30rpx;
  border-radius: 50%;
}

JS:

  // 获取滚动条当前位置
  onPageScroll: function (e) {
    console.log(e)
    if (e.scrollTop > 100) {
      this.setData({
        floorstatus: true
      });
    } else {
      this.setData({
        floorstatus: false
      });
    }
  },

  //回到顶部
  goTop: function (e) {  // 一键回到顶部
    if (wx.pageScrollTo) {
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  },

2. Use scroll- Return to the top in view form

<image src=&#39;../../img/button-top.png&#39; class=&#39;goTop&#39; hidden=&#39;{{!floorstatus}}&#39; bindtap="goTop"></image>

CSS：

/* 返回顶部 */
.goTop{
  height: 80rpx;
  width: 80rpx;
  position: fixed;
  bottom: 50rpx;
  background: rgba(0,0,0,.3);
  right: 30rpx;
  border-radius: 50%;
}

JS：

  data:{
	topNum: 0
  }
  
  // 获取滚动条当前位置
  scrolltoupper:function(e){
    console.log(e)
    let t =  e.detail.scrollTop;
    if (t > 100 && !this.data.floorstatus) {
    	// 避免重复setData
    	this.setData({
	       floorstatus: true
	    });
    } 
    
   	if(t <= 100 && this.data.floorstatus){
  	  this.setData({
        floorstatus: false
      });
   	}
  },

  //回到顶部
  goTop: function (e) {  // 一键回到顶部
    this.setData({
      topNum: this.data.topNum = 0
    });
  },

Related recommendations:小program development tutorial

The above is the detailed content of What are the two ways to return to the top of the mini program?. For more information, please follow other related articles on the PHP Chinese website!