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

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

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

wxml代码：

客服

电话

顶层

js代码：

var app = getApp();

Page({

data: {

hidden: true,

list: [],

scrollTop: {

scroll_top: 0,

goTop_show: false

},

shttp://crollHeight: 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) {

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;

http://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 组件的高度设置起来而且不能是百分比 如100%这样，可以是rpx，这样才可以监测到滑动的距离。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。