Welche zwei Möglichkeiten gibt es, an die Spitze des Miniprogramms zurückzukehren?-Mini-Programmentwicklung-php.cn

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

王林

Freigeben： 2021-01-06 10:36:21

nach vorne

3407 Leute haben es durchsucht

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>

Nach dem Login kopieren

CSS:

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

Nach dem Login kopieren

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: &#39;提示&#39;,
        content: &#39;当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。&#39;
      })
    }
  },

Nach dem Login kopieren

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>

Nach dem Login kopieren

CSS:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!