您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)微信小程序如何實現(xiàn)點擊返回頂層,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
wxml代碼:
<scroll-view scroll-y scroll-top="50" enable-back-to-top="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun"> <block wx:for="{{sortArr}}"> <template is="spL" data="{{item}}"></template> </block> </scroll-view> <!-- 聯(lián)系客服 --> <view class="findOur fliexBox"><contact-button type="default-light" size="15" session-from="weapp"></contact-button>客服</view> <!-- 撥打電話 --> <view class="callOur fliexBox" bindtap="call">電話</view> <view class="fliexBox" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun">頂層</view>
js代碼:
var app = getApp(); Page({ data: { hidden: true, list: [], scrollTop: { scroll_top: 0, goTop_show: false }, scrollHeight: 0, floorstatus:true, sortArr:[ { id: 1, img: "../../images/2.jpg", title: "君御豪園住宅", introduction: "杭州不限購不限貸口住宅", money: 5000, vperson: 115, tperson: 0 } ], }, scrollTopFun: function (e) { console.log(e.detail); if (e.detail.scrollTop > 300) {//觸發(fā)gotop的顯示條件 this.setData({ 'scrollTop.goTop_show': true }); } else { this.setData({ 'scrollTop.goTop_show': false }); } }, goTopFun: function (e) { var _top = this.data.scrollTop.scroll_top;//發(fā)現(xiàn)設(shè)置scroll-top值不能和上一次的值一樣,否則無效,所以這里加了個判斷 if (_top == 0) { _top = 1; } else { _top = 0; } this.setData({ 'scrollTop.scroll_top': _top }); }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { var that = this; wx.getSystemInfo({ success: function (res) { that.setData({ scrollHeight: res.windowHeight }); } }); }, })
wxss代碼:
.fliexBox{ width: 100rpx; height: 50rpx; background-color: #5db13b; color: #ffffff; text-align: center; position: fixed; right: 0rpx; bottom: 85rpx; border-radius: 20rpx 0rpx 0rpx 20rpx; font-size: 26rpx; line-height: 50rpx; opacity: .6; } .callOur{ bottom: 20rpx; } contact-button{ opacity: 0; position: absolute; }
主要是需要把scroll-view 組件的高度設(shè)置起來而且不能是百分比 如100%這樣,可以是rpx,這樣才可以監(jiān)測到滑動的距離。
關(guān)于“微信小程序如何實現(xiàn)點擊返回頂層”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(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)容。