小程序模板网

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

2018-07-21 缠齿羊

很多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视图,目的是当我们的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是当前调用改函数时相应节点对应当前顶部的距离,这就有一个问题,当我们的header的高度(不一定是header只要是section-header上面的视图的高度)发生变化的时候,悬停就会有问题,因为我们的高度是最开始的时候获取的。

所以在我们改变高度之后,要再次调用该函数去获取距离"当前顶部"的距离,这也是要注意的一个点,如果我能直接再次获取并赋值,发现还是有问题,就是因为此时获取的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()

加上此时页面滚动的距离,则能保证我们预期的效果出现!!!!



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24649.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询