小程序页面内容过长滚动出现延迟及自定义导航栏

最近遇到一个问题,滚动到一定高度,将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

自定义导航栏:https://github.com/mulook/weapp-navigation-bar

你可能感兴趣的:(小程序页面内容过长滚动出现延迟及自定义导航栏)