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

主要实现方式为:

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

wxml:

<view id='location_id' style="  padding: 0 40rpx; border:1rpx solid #DCDCDC;"></view>
<view class="{
  { hideTop == true ? 'topnav' : '' }}">

  <view class="list-location" bindtap="showLocation">位置
     <van-icon name="arrow-down" />
  </view>
  <view style=" margin-top: 20rpx; padding: 0 40rpx; border:1rpx solid #DCDCDC;"></view>
</view>

 

wxss:

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

 

js:

//页面滚动监听
  onPageScroll: function (e) {
    let vm = this;
    var q