最近在研究微信小程序,被這個(gè)返回頂層給坑了一波,下面貼代碼
wxml代碼:
<scroll-view scroll-y style="height: 1000rpx;" 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" style=" bottom: 150rpx; border: solid 1px green;" 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: "杭州不限購(gòu)不限貸口住宅",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值不能和上一次的值一樣,否則無(wú)效,所以這里加了個(gè)判斷 if (_top == 0) {_top = 1;} else {_top = 0;}this.setData({'scrollTop.scroll_top': _top});},/*** 生命周期函數(shù)--監(jiān)聽頁(yè)面加載*/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è)置起來(lái)而且不能是百分比 如100%這樣,可以是rpx,這樣才可以監(jiān)測(cè)到滑動(dòng)的距離。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注