1.使用onPageScroll()函数监听滚动条
onPageScroll(e){
//参数e会返回滚动条滚动的高度
console.log(e)
if(e.scrollTop > 300){ }else { }
},
由这个方法可以监听滚动条变化做到需要改变的状态
但是效果并不是很好,在编辑器上可能看不出效果,真机上效果很差,有很大的延迟(猜想可能是做的setData操作)滑动较慢没多大反应,但是划很快就很容易体现出来
2.(推荐使用)使用scroll-view 组件 的 bindscroll 事件
首先我们把所有内容放到scroll-view组件中
HTML:
<scroll-view scroll-y style="height: 100vh;" bindscroll="scroll" >
//你的内容 根据tabbarFix控制css变成fixed
<view class="tabbar {
{tabbarFix ? 'tab-fixed' : ''}}">
</view>
</scroll-view>