您好,登錄后才能下訂單哦!
小編給大家分享一下小程序如何實現(xiàn)回到頂部的功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
小程序回到頂部有兩種方式,分別是:
一、使用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:
// 獲取滾動條當(dāng)前位置 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: '當(dāng)前微信版本過低,無法使用該功能,請升級到最新微信版本后重試。' }) } },
二.使用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 } // 獲取滾動條當(dāng)前位置 scrolltoupper:function(e){ console.log(e) let t = e.detail.scrollTop; if (t > 100 && !this.data.floorstatus) { // 避免重復(fù)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 }); },
以上是“小程序如何實現(xiàn)回到頂部的功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。