微信小程序mpvue实现吸顶效果

效果

某块区域，当滑动距离大于某个值时，就让这块区域固定在顶部，如果小于某个值，就让它恢复原样。

代码

<scroll-view class='scroll-view-vertical' scroll-y="true" @scroll="viewScroll">
  <div class="{{top > 100 ? 'audio-fixed' : ''}}">
  </div>
</scroll-view> 

// data
top: 0,

// methods
viewScroll (e) {
  console.log(e)      
  this.top = e.mp.detail.scrollTop;            
},

.scroll-view-vertical {
    width: 100%;
    height: 100%;
}
.audio-fixed {
    background-color: #fff;
    position: fixed;
    top: 0;
    width: 750rpx;        
}

注意点

整体代码的思想很简单，让整个页面都是可滑动的，使用scroll-view组件可以使用它自身的滚动事件，获取距离顶部的高度，当高度大于你想要的值时，就为固定区域添加样式类，让这块区域固定在顶部。
需要注意的地方是，你设置的height: 100%;可能不起作用，因为高度是从父级元素继承的，所以需要设置

body, html {
  height: 100%;
}

以及你页面最外层元素的高度，都需要设置高度100%，直到scroll-view-list-vertical可以继承为止

网站导航

网站导航