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

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

作者: 秋玄语道 | 来源:发表于2019-02-28 15:03 被阅读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

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/jeghuqtx.html