微信小程序使用onPageScroll实现当搜索栏到达顶部时,固定检索栏[转]

主要实现方式为:

先创建id 为location_id的view,然后使用onPageScroll监听该view的位置,当其位置小于0时,设置hideTop = true

wxml:

<view  ></view>
<view class="{{ hideTop == true ? 'topnav' : '' }}">
 
  <view class="list-location" bindtap="showLocation">位置
     <van-icon name="arrow-down" />
  </view>
  <view ></view>
</view>

.topnav{
    position: fixed;
    top: 0rpx;
    z-index:99;
    background: rgb(255,255,255);
    width: 100%;
}

//页面滚动监听
  onPageScroll: function (e) {
    let vm = this;
    var query = wx.createSelectorQuery()
    query.select('#location_id').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      if (res[0].top < 0){  //res[0].top为location_id距离顶部的位置
        vm.setData({
          hideTop: true
        })
      }else{
        vm.setData({
          hideTop: false
        })
      }
    })
  },

使用说明：

只要我们把需要的固定的内容放到这个位置，代替就可以了。

<view class="list-location" bindtap="showLocation">位置
     <van-icon name="arrow-down" />
</view>

转：

https://blog.csdn.net/qq_39142965/article/details/101422729