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
})
}，
