微信小程序仿APP section header懸停效果

很多APP都有這么一個效果，列表頭在滾動到頂部時會懸停在頂部，比如在iOS開發(fā)中UITableview設(shè)置 style 屬性設(shè)置為 Plain ，這個tableview的section header在滾動時會默認懸停在界面頂端。

那么我們怎么在微信小程序也實現(xiàn)這么一個效果呢？ 

首先寫一個非常簡單列表：

wxml代碼

1. <view class='header'>這里是header</view>
2. <view class='section-header'>這是section-header</view>
3. <block wx:for="{{testData}}">
4. <view class='section-cell'>{{item}}</view>
5. </block>

wxss代碼

1. .header {
2. height: 300rpx;
3. width: 750rpx;
4. background-color: bisque;
5. margin-bottom: 10rpx;
6. }
7.  
8. .section-header {
9. height: 80rpx;
10. width: 750rpx;
11. background-color: rebeccapurple;
12. }
13.  
14. .section-cell {
15. height: 180rpx;
16. width: 750rpx;
17. background-color: gold;
18. margin-top: 10rpx;
19. }

簡單列表效果.png  那我們要怎么樣讓頭部懸停呢？

1、我們需要在頁面布局完成后獲取到頭部的位置：

在onReady方法中，查詢section-header節(jié)點并拿到該節(jié)點此時距離當前頂部的距離

注意是 此時，這個后面再講

1. /**
2. * 頁面加載完成
3. */
4. onReady: function () {
5. let that = this
6. let query = wx.createSelectorQuery()
7. query.select(".section-header").boundingClientRect(function (res) {
8. // console.log(res)
9. that.setData({
10. //section header 距離 ‘當前頂部’ 距離
11. sectionHeaderLocationTop: res.top
12. })
13. }).exec()
14. },

2、我們需要監(jiān)聽頁面滾動：

fixed用來控制是否懸停

1. /**
2. * 頁面滾動監(jiān)聽
3. */
4. onPageScroll: function (e) {
5. //console.log(e)
6. this.setData({
7. scrollTop: e.scrollTop
8. })
9. if (e.scrollTop > this.data.sectionHeaderLocationTop) {
10. this.setData({
11. fixed: true
12. })
13. } else {
14. this.setData({
15. fixed: false
16. })
17. }
18. },

3、修改相應(yīng)的樣式：

將原來的header修改為如下代碼，并添加一個placeholder視圖，目的是當我們的section-header視圖懸停時，保持占位，避免頁面抖動

1. <view class='{{fixed ? "section-header section-fixed": "section-header"}}'>這是section-header</view>
2. <view hidden='{{!fixed}}' class="section-header section-placeholder"></view>

增加wxss代碼

1. .section-placeholder {
2. background-color: white;
3. }
4.  
5. .section-fixed {
6. position: fixed;
7. top: 0;
8. }

附上js data 代碼:

1. data: {
2. testData:[1,2,3,4,5,6,7,8,9,10],
3. //section header 距離 ‘當前頂部’ 距離
4. sectionHeaderLocationTop: 0,
5. //頁面滾動距離
6. scrollTop: 0,
7. //是否懸停
8. fixed: false
9. },

此時我們需要的效果就實現(xiàn)了：

sectionHeader懸浮.gif  這個有一個要注意的點，我們在使用swlectorQuery()的時候，獲取到的top是當前調(diào)用改函數(shù)時相應(yīng)節(jié)點對應(yīng)當前頂部的距離，這就有一個問題，當我們的header的高度（不一定是header只要是section-header上面的視圖的高度）發(fā)生變化的時候，懸停就會有問題，因為我們的高度是最開始的時候獲取的。

所以在我們改變高度之后，要再次調(diào)用該函數(shù)去獲取距離"當前頂部"的距離，這也是要注意的一個點，如果我能直接再次獲取并賦值，發(fā)現(xiàn)還是有問題，就是因為此時獲取的top不是距離整個page頁面頂部，而我們監(jiān)聽的頁面滾動卻是，所以我們可以修改代碼如下：

1. let that = this
2. let query = wx.createSelectorQuery()
3. query.select(".section-header").boundingClientRect(function (res) {
4. // console.log(res)
5. that.setData({
6. //section header 距離 ‘當前頂部’ 距離
7. sectionHeaderLocationTop: res.top + that.data.scrollTop
8. })
9. }).exec()

加上此時頁面滾動的距離，則能保證我們預(yù)期的效果出現(xiàn)

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店