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

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

首先寫一個(gè)非常簡單列表：

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é)點(diǎn)并拿到該節(jié)點(diǎn)此時(shí)距離當(dāng)前頂部的距離

注意是 此時(shí)，這個(gè)后面再講

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 距離 ‘當(dāng)前頂部’ 距離
11. sectionHeaderLocationTop: res.top
12. })
13. }).exec()
14. },

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

fixed用來控制是否懸停

1. /**
2. * 頁面滾動(dòng)監(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修改為如下代碼，并添加一個(gè)placeholder視圖，目的是當(dāng)我們的section-header視圖懸停時(shí)，保持占位，避免頁面抖動(dòng)

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 距離 ‘當(dāng)前頂部’ 距離
4. sectionHeaderLocationTop: 0,
5. //頁面滾動(dòng)距離
6. scrollTop: 0,
7. //是否懸停
8. fixed: false
9. },

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

sectionHeader懸浮.gif  這個(gè)有一個(gè)要注意的點(diǎn)，我們在使用swlectorQuery()的時(shí)候，獲取到的top是當(dāng)前調(diào)用改函數(shù)時(shí)相應(yīng)節(jié)點(diǎn)對應(yīng)當(dāng)前頂部的距離，這就有一個(gè)問題，當(dāng)我們的header的高度（不一定是header只要是section-header上面的視圖的高度）發(fā)生變化的時(shí)候，懸停就會(huì)有問題，因?yàn)槲覀兊母叨仁亲铋_始的時(shí)候獲取的。

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

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 距離 ‘當(dāng)前頂部’ 距離
7. sectionHeaderLocationTop: res.top + that.data.scrollTop
8. })
9. }).exec()

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

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