小程序自定义导航栏,页面滚动到一定高度时,加上背景色,用到了节流函数和函数防抖
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 秒内又触发了事件,则会重新计算函数执行时间。 函数节流,限制一个函数在一定时间内只能执行一次。
相关文章推荐
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
- 微信小程序使用自定义组件导航实现当前页面高亮
- 微信小程序弹出自定义模态框,禁止底部页面滚动事件
- 解决微信小程序自定义弹窗滚动与页面滚动冲突
- 微信小程序 css样式 : 书本页面立体样式 前大后小,自定义收缩高度
- 利用函数防抖和函数节流提高小程序性能
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
- js 滚动到一定位置导航定位在页面最顶部
- 小程序基础开发(一):配置tab底部栏页面,page和component的区别,使用component自定义头部组件样式和底部导航
- 页面优化之高性能函数防抖与节流
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
- 页面优化之高性能滚动scroll(防抖和节流)
- 微信小程序根据页面滚动距离固定分类导航
- 微信小程序 —— 解决自定义弹窗出现后,蒙层下的页面仍可以滚动的问题
- 自己遇到的 导航控制器 push了好几层 让他一次返回到前面的指定页面 不一定是根页面
- 微信小程序自定义底部导航带跳转功能
- net控件中数据导到Excel的格式 首先,我们了解一下excel从web页面上导出的原理。当我们把这些数据发送到客户端时,我们想让客户端程序(浏览器)以excel的格式读取它,所以把mime类型设为:application/vnd.ms-excel,当excel读取文件时会以每个cell的格式呈现数据,如果cell没有规定的格式,则excel会以默认的格式去呈现该cell的数据。这样就给我们提供了自定义数据格式的空间,当然我们必须使用excel支持的格式。下面就列出常用的一些格式: 1) 文本
- android自定义字体和程序启动时的加载页面
- Silverlight Navigation-Silverlight页面间自定义导航
- textview 滚动效果(自定义高度)