Welche zwei Möglichkeiten gibt es, an die Spitze des Miniprogramms zurückzukehren?

Es gibt zwei Möglichkeiten, zum Anfang des Miniprogramms zurückzukehren, nämlich:

(Lernempfehlung: Programmiervideo)

1. Verwenden Sie das Ansichtsformular, um zum Anfang zurückzukehren

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. Verwenden Sie die Bildlaufansicht, um nach oben zurückzukehren

<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
    });
  },

Verwandte Empfehlungen: Mini-Programm Anleitung

Das obige ist der detaillierte Inhalt vonWelche zwei Möglichkeiten gibt es, an die Spitze des Miniprogramms zurückzukehren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!