微信小程序吸顶效果

最新推荐文章于 2024-07-11 20:30:00 发布

sonnyface

最新推荐文章于 2024-07-11 20:30:00 发布

阅读量7.7k

点赞数

分类专栏：小程序文章标签：小程序微信 web前端

本文链接：https://blog.csdn.net/sonnyface/article/details/79636321

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 在需要监听的外部添加

 
 < 
 scroll-view 
 style= 
 "height:100vh" 
 class= 
 "scroll-view" 
 scroll-y= 
 "true" 
 bindscroll= 
 "scroll"> 

 
  < 
  view 
  class= 
  "{{scroll_height<'150'?'barrage':'barraging'}}"> 
 
  < 
  view 
    
  class 
  = 
  "swipwer" 
  > 
  吸顶效果 
  </ 
  view 
  > 
 
  </ 
  view 
  >

 
 </scroll-view> 

2. 判断不同的class名改变样式

 
  /*样式 */ 
 
  .barrage{ 
 
  width: 
  100%; 
 
  height: 
  50 
  rpx; 
 
  margin-top: 
  20 
  rpx; 
 
  position: 
  relative; 
 
   } 
 
  .barraging{ 
 
  width: 
  100%; 
 
  height: 
  50 
  rpx; 
 
  position: 
  fixed; 
 
  left: 
  0; 
 
  top: 
  0; 
 
  z-index: 
  100; 
 
  margin-top: 
  20 
  rpx; 
 
   } 
 
  .barrage 
  .swipwer{ 
 
  margin-left: 
  24 
  rpx; 
 
  height: 
  50 
  rpx; 
 
  line-height: 
  50 
  rpx; 
 
  background: 
  rgba( 
  0, 
  0, 
  0, 
  0.6 
  ); 
 
  font-size: 
  26 
  rpx; 
 
  text-align: 
  center; 
 
  color: 
  #fff; 
 
  width: 
  60%; 
 
  border-radius: 
  30 
  rpx; 
 
  position: 
  absolute; 
 
  left: 
  -500 
  rpx; 
 
   } 
 
  .barraging 
  .swipwer{ 
 
  margin-left: 
  24 
  rpx; 
 
  height: 
  50 
  rpx; 
 
  line-height: 
  50 
  rpx; 
 
  background: 
  rgba( 
  0, 
  0, 
  0, 
  0.6 
  ); 
 
  font-size: 
  26 
  rpx; 
 
  text-align: 
  center; 
 
  color: 
  #fff; 
 
  width: 
  60%; 
 
  border-radius: 
  30 
  rpx; 
 
  position: 
  absolute; 
 
  left: 
  -500 
  rpx; 
 
   }

2. js事件处理

 
  //存储高度 
 
   data: { 
 
   scroll_height: 
  '' 
 
   },

//滚动监听

   scroll: 
  function (e) { 
 
  var that= 
  this; 
 
  // console.log(e.detail.scrollTop) 
 
   that.setData({ 
 
   scroll_height: e.detail.scrollTop 
 
   }) 
 
   }，