小程序页面内容过长滚动出现延迟及自定义导航栏
2019-02-28 本文已影响0人
秋玄语道
最近遇到一个问题,滚动到一定高度,将tab栏固定在顶部,点击tab栏继续滚动到某个位置。然鹅,Android竟然出现反应迟钝的情况,IOS没出现。最后从我朋友那里领教了,使用节流的办法。不多说了,直接上代码。
在小程序utils文件中加入以下代码:
function throttle(fn, gapTime) {
if (gapTime == null || gapTime == undefined) {
gapTime = 300 //设置了300毫秒
}
let _lastTime = null
// 返回新的函数
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn.apply(this, arguments) //将this和传递给原函数
_lastTime = _nowTime
}
}
}
module.exports = {
formatTime: formatTime,
throttle: throttle
}
//在滚动页面的js中引入util.js
const util = require('../../utils/util.js')
onLoad: function (options) {
const query = wx.createSelectorQuery()
query.select('.topContent').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
that.setData({
scrollHeight: res[0].height
})
})
},
scroll: util.throttle(function (e) {
var scrollHeight =this.data.scrollHeight
//判断滚动的高度,进行处理页面
if (e.detail.scrollTop < scrollHeight) {
}
},0),
这样的办法就可以不会让Android反应延迟,原理是减少调用滚动同个方法的次数。
当然,还要再json中加入"enablePullDownRefresh": false