图1
图2
最近有个小需求，需要在滑动列表的时候，让图1中红线框部分悬停，变成图2。对于我这个前端小白，想了一下，大体思路是这样：通过系统的onPageScroll方法，监听滑动，在适当时机改变视图的css. 代码如下：
//监测滑动，进行view悬停
onPageScroll:
function (e) {
if (e.scrollTop >
0) {
this.setData({ shouldFixedTop:
true });
}
else {
this.setData({ shouldFixedTop:
false });
}
if (e.scrollTop >=
197) {
this.setData({ shouldFiexdSelect:
true });
}
else {
this.setData({ shouldFiexdSelect:
false });
}
},
其中，shouldFixedTop,shouldFiexdSelect分别是为了控制两个红线框的css变动。
<
view
class=
'{{shouldFixedTop?"fixed-top":"topView"}}'>
<
view
class=
'{{shouldFiexdSelect?"fixed-select":"selectView"}}'>
蓝色框是干嘛的呢？我为什么要圈出蓝色框？ 主要是在改变css变为positon:fixed的时候，蓝色框中的视图由于突然上移会突然闪一下。所以需要在改变红线框css的时候，蓝色框也要改变一下，加上一个margin-top：'红线框的高度'。
<
view
class=
'{{shouldFixedTop?"special_list_fixed":"special_list"}}'>
<view class='{{shouldFiexdSelect?"list_bottom_view_fixed":"list_bottom_view"}}'>
.list_bottom_view {
margin-top:
0;
}
.list_bottom_view_fixed {
margin-top:
88px; //margin-top，防止闪动
}
上述代码主要介绍思路，具体的css属性相信大家都会写。