詳解微信小程序回到頂部的兩種方式

2020-03-21 15:57:10

字體：大中小

來源：轉載

供稿：網友

在做微信小程序開發時，遇到一個問題，要如何實現返回頂部的功能，下面就用2種方法實現

一,使用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)  if (e.detail.scrollTop > 100) {   this.setData({    floorstatus: true   });  } else {   this.setData({    floorstatus: false   });  } }, //回到頂部 goTop: function (e) { // 一鍵回到頂部  this.setData({   topNum: this.data.topNum = 0  }); },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。

上一篇：詳解使用uni-app開發微信小程序之登錄模塊

下一篇：詳解微信小程序的不同函數調用的幾種方法