小程序回到顶部有哪两种方式-小程序开发

小程序回到顶部有两种方式，分别是：

（学习推荐：编程视频）

一、使用view形式的回到顶部

HTML：

<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' 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: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'      })    }  },

二.使用scroll-view形式的回到顶部

<scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper"><image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' 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    });  },

相关推荐：小程序开发教程

以上就是小程序回到顶部有哪两种方式的知识。速戳>>知识兔学习精品课！