微信小程序滑动悬停

  

                                    图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属性相信大家都会写。