主要实现方式为:
先创建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>
.topnav{ position: fixed; top: 0rpx; z-index:99; background: rgb(255,255,255); 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>
转: