许多APP都有这么一个效果，，，列表头在转动到顶部时会悬停在顶部，，，好比在iOS开发中UITableview设置 style 属性设置为 Plain ，，，这个tableview的section header在转动时会默认悬停在界面顶端。。。。。。

那么我们怎么在微信小程序也实现这么一个效果呢？？？？？？ 

首先写一个很是简朴列表：

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节点并拿到该节点此时距离目今顶部的距离

注重是 此时，，，这个后面再讲

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、我们需要监听页面转动：

fixed用来控制是否悬停

1. /**
2. * 页面转动监听
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、修改响应的样式：

将原来的header修改为如下代码，，，并添加一个placeholder视图，，，目的是当pp电子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. },

此时我们需要的效果就实现了：

sectionHeader悬浮.gif  这个有一个要注重的点，，，我们在使用swlectorQuery()的时间，，，获取到的top是目今挪用改函数时响应节点对应目今顶部的距离，，，这就有一个问题，，，当pp电子header的高度（纷歧定是header只要是section-header上面的视图的高度）爆发转变的时间，，，悬停就会有问题，，，由于pp电子高度是最最先的时间获取的。。。。。。

以是在我们改变高度之后，，，要再次挪用该函数去获取距离"目今顶部"的距离，，，这也是要注重的一个点，，，若是我能直接再次获取并赋值，，，发明照旧有问题，，，就是由于此时获取的top不是距离整个page页面顶部，，，而我们监听的页面转动却是，，，以是我们可以修改代码如下：

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()

加上此时页面转动的距离，，，则能包管我们预期的效果泛起

小程序工具提供多类型商城/门店小程序制作，，，可视化编辑 1秒天生5步上线。。。。。。通过拖拽、拼接？？？？？？榻峁剐〕绦蛏坛且趁，，，所看即所得，，，只需要美工就能做出细腻商城。。。。。。更多小程序市肆请审查：小程序市肆