微信小程序回到顶部

在做微信小程序开发时,遇到一个问题,要如何实现返回顶部的功能,下面就用2种方法实现

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

HTML:

<image src='https://www.zhangshengrong.com/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='https://www.zhangshengrong.com/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

});

},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

以上是 微信小程序回到顶部 的全部内容, 来源链接: www.h5w3.com/123088.html

回到顶部