微信小程式滑動懸停

Ailsa-show發表於2018-06-01
微信小程式

微信小程式滑動懸停

2018年03月18日 21:14:06
閱讀數：399

  

                                    圖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屬性相信大家都會寫。


相關文章