小程序滚动问题

clipboard.png

当红色箭头指向的导航部分滚动到最上面时,固定在最顶部,用onpagescroll实现和scroll绑定滚动事件在手机上模拟的时候都会等到滑动完成后才执行!请问各位大神有啥好的解决办法

阅读 2.9k
3 个回答

设置限定条件当小于菜单栏当前高度时,菜单栏正常显示,当大于等于这个高度,添加class:fixed改变菜单栏的position:fixed,再调整商品的位置即可

<view class="ccc {{menuFixed ? 'fixed': ''}}" id="affix">需要贴顶吸附菜单栏</view>
.fixed {
position:fixed;
top:0;
left:0;

}
onPageScroll: function(ev) {
    var that = this;
    var a = ev.scrollTop; //存储滚动高度
    if ( a < 400) {
      that.setData({
        menuFixed: false,
      })
    }
    
    if (a >= 400) {
      that.setData({
        menuFixed: true,
      })
    }
    //给scrollTop重新赋值
    setTimeout(function() {
      that.setData({
        scrollTop: ev.scrollTop
      })
    }, 0)
  },

你外面没有嵌套竖向的<scroll-view>吧,那就用wx.createSelectorQuery,可以获取到导航部分距顶部的距离,当距离小于0的时候显示固定在顶部的导航,大于0隐藏,放在onPageScroll

因为onPageScroll不会实时触发,
你可以内容放在scroll-view监听bindscroll事件

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题