您的位置:首页 > 移动开发 > 微信开发

小程序自定义导航栏,页面滚动到一定高度时,加上背景色,用到了节流函数和函数防抖

2020-06-06 05:17 253 查看

页面效果:(自定义导航栏)。页面刚开始没有导航栏,滚动的距离大于图片的高度时,导航栏出现,反之,导航栏隐藏。

wxml文件中代码。

//这里使用小程序中的导航栏扩展组件
<mp-navigation-bar background="{{background}}" title="{{title}}" tag-class="{{indexStyle==0?'bg':''||index==indexStyle?'':''}}">
</mp-navigation-bar>

wxss文件中代码。

.bg{
height: 0px!important;
padding-top: 0px!important;
}

js文件中代码。
在使用onPageScroll滚动时,因为操作频繁,导致使用的this.setData使页面滚动会延迟2-3秒,所以使用了函数节流来降低频繁操作。但是函数节流会使页面滑动过快,导致部分内容获取不到,从而拿到的高度有问题,解决方法:使用了函数防抖,这样使每次拿到的滚动的高度都是最后一个数值,而不是根据时间来拿到的这个数值。

Page({
data: {
indexStyle: 0,
background: '',
title:''
},
//监听屏幕滚动 判断上下滚动
onPageScroll: util.debounce(function (e) {
var that=this;
//console.log(e[0].scrollTop);
that.jl(e[0].scrollTop);  //拿到每次监听滚动的最后一个数值
}),
jl:util.throttle(function (e) {
var that = this;
console.log(e);
if (e[0] >= this.data.checkedNum) {
that.setData({
indexStyle: 1,
background: "#ffffff",
title: "商品详情"
})
//console.log(this.data.checkedNum);
} else if (e[0] <= this.data.checkedNum) {
that.setData({
indexStyle: 0,
background: "",
title: ""
})
}

}),
//这里拿的子组件中图片的高度
checkNum: function (e) {
this.setData({
checkedNum: e.detail.checkedNum,
})
},
})

util.js文件里写函数节流和函数防抖

module.exports = {
throttle: throttle,
debounce: debounce
}
/*函数节流*/
function throttle(fn, interval) {
var enterTime = 0;//触发的时间
var gapTime = interval || 100;//间隔时间,如果interval不传,则默认300ms
return function () {
var context = this;
var backTime = new Date();//第一次函数return即触发的时间
if (backTime - enterTime > gapTime) {
fn.call(context, arguments);
enterTime = backTime;//赋值给第一次触发的时间,这样就保存了第二次触发的时间
}
};
}

/*函数防抖*/
function debounce(fn, interval) {
var timer;
var gapTime = interval || 50;//间隔时间,如果interval不传,则默认1000ms
return function () {
clearTimeout(timer);
var context = this;
var args = arguments;//保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
timer = setTimeout(function () {
fn.call(context, args);
}, gapTime);
};
}

函数节流和函数防抖的概念

函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,
如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

函数节流,限制一个函数在一定时间内只能执行一次。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐