好资源导航 » 文章资讯 » 微信小程序实现点击返回顶层的方法

微信小程序实现点击返回顶层的方法

2024-02-06 07:00:05 58

最近在研究微信小程序，被这个返回顶层给坑了一波，下面贴代码

wxml代码：







客服

电话
顶层

js代码：

varapp=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){//触发gotop的显示条件
this.setData({
'scrollTop.goTop_show':true
});
}else{
this.setData({
'scrollTop.goTop_show':false
});
}
},
goTopFun:function(e){
var_top=this.data.scrollTop.scroll_top;//发现设置scroll-top值不能和上一次的值一样，否则无效，所以这里加了个判断
if(_top==0){
_top=1;
}else{
_top=0;
}
this.setData({
'scrollTop.scroll_top':_top
});
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
varthat=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:20rpx0rpx0rpx20rpx;
font-size:26rpx;
line-height:50rpx;
opacity:.6;
}
.callOur{
bottom:20rpx;
}
contact-button{
opacity:0;
position:absolute;
}

主要是需要把scroll-view组件的高度设置起来而且不能是百分比如100%这样，可以是rpx，这样才可以监测到滑动的距离。

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

返回顶部
514930285
czq8825@qq.com

微信小程序实现点击返回顶层的方法

热门推荐

随机推荐