专栏首页韦弦的偶尔分享微信小程序仿APP section header 悬停效果

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

美好的心情.jpeg

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

那么我们怎么在微信小程序也实现这么一个效果呢? 首先写一个非常简单列表:

wxml代码
<view class='header'>这里是header</view>
<view class='section-header'>这是section-header</view> 
<block wx:for="{{testData}}">
  <view class='section-cell'>{{item}}</view>
</block>
wxss代码
.header {
  height: 300rpx;
  width: 750rpx;
  background-color: bisque;
  margin-bottom: 10rpx;
}

.section-header {
  height: 80rpx;
  width: 750rpx;
  background-color: rebeccapurple;
}

.section-cell {
  height: 180rpx;
  width: 750rpx;
  background-color: gold;
  margin-top: 10rpx;
}

简单列表效果.png

那我们要怎么样让头部悬停呢?
1、我们需要在页面布局完成后获取到头部的位置:

在onReady方法中,查询section-header节点并拿到该节点此时距离当前顶部的距离

注意是 此时,这个后面再讲
  /**
   * 页面加载完成
   */
  onReady: function () {
    let that = this
    let query = wx.createSelectorQuery()
    query.select(".section-header").boundingClientRect(function (res) {
      // console.log(res)
      that.setData({
        //section header 距离 ‘当前顶部’ 距离
        sectionHeaderLocationTop: res.top
      })
    }).exec()
  },
2、我们需要监听页面滚动:

fixed用来控制是否悬停

  /**
   * 页面滚动监听
   */
  onPageScroll: function (e) {
    //console.log(e)
    this.setData({
      scrollTop: e.scrollTop
    })
    if (e.scrollTop > this.data.sectionHeaderLocationTop) {
      this.setData({
        fixed: true
      })
    } else {
      this.setData({
        fixed: false
      })
    }
  },
3、修改相应的样式:
将原来的header修改为如下代码,并添加一个placeholder视图,目的是当我们的section-header视图悬停时,保持占位,避免页面抖动
<view class='{{fixed ? "section-header section-fixed": "section-header"}}'>这是section-header</view>
<view hidden='{{!fixed}}' class="section-header section-placeholder"></view> 
增加wxss代码
.section-placeholder {
  background-color: white;
}

.section-fixed {
  position: fixed;
  top: 0;
}

附上js data 代码:

  data: {
    testData:[1,2,3,4,5,6,7,8,9,10],
    //section header 距离 ‘当前顶部’ 距离
    sectionHeaderLocationTop: 0,
    //页面滚动距离
    scrollTop: 0,
    //是否悬停
    fixed: false
  },

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

sectionHeader悬浮.gif

这个有一个要注意的点,我们在使用swlectorQuery()的时候,获取到的top是当前调用改函数时相应节点对应当前顶部的距离,这就有一个问题,当我们的header的高度(不一定是header只要是section-header上面的视图的高度)发生变化的时候,悬停就会有问题,因为我们的高度是最开始的时候获取的。

所以在我们改变高度之后,要再次调用该函数去获取距离"当前顶部"的距离,这也是要注意的一个点,如果我能直接再次获取并赋值,发现还是有问题,就是因为此时获取的top不是距离整个page页面顶部,而我们监听的页面滚动却是,所以我们可以修改代码如下:

  let that = this
    let query = wx.createSelectorQuery()
    query.select(".section-header").boundingClientRect(function (res) {
      // console.log(res)
      that.setData({
        //section header 距离 ‘当前顶部’ 距离
        sectionHeaderLocationTop: res.top + that.data.scrollTop
      })
    }).exec()

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 给iOS模拟器推送远程通知

    苹果刚刚发布了具有大量功能的Xcode 11.4 beta。值得注意的功能之一是在模拟器中模拟远程推送通知,这意味着现在可以在模拟器中触发远程通知。

    韦弦zhy
  • Hacking with iOS: SwiftUI Edition - Core Data 项目——挑战

    最初,Core Data 似乎是一个枯燥的话题,但是在构建应用程序时它非常有用——您已经了解了如何使用相对简单的代码来添加,删除,排序,过滤等等。是的,在Swi...

    韦弦zhy
  • SwiftUI:创建表单

    许多应用程序都要求用户输入某种内容——可能是要求他们设置一些偏好,可能是要求他们确认他们想要车去哪里接他们,可能是从菜单上订购食物,或是其他类似的东西。

    韦弦zhy
  • 机器学习与深度学习习题集答案-2

    本文是机器学习和深度学习习题集答案的第2部分,也是《机器学习-原理、算法与应用》一书的配套产品。此习题集可用于高校的机器学习与深度学习教学,以及在职人员面试准备...

    SIGAI学习与实践平台
  • 2015年ccf计算机职业认证资格考试第一题数列分段

      输入的第一行包含一个整数n,表示数列中整数的个数。   第二行包含n个整数a1, a2, …, an,表示给定的数列,相邻的整数之间用一个空格分隔。

    glm233
  • 腾讯原创作品区块链版权存证发布​

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? ? 原创馆和腾讯区块链联合打造的“版权存证”功能已经上线啦,通过区块链技术为您的原...

    腾讯ISUX
  • 流媒体协议RTSP视频平台EasyNVR在windows下编译报错,该如何解决?

    由于很多开发者使用的操作系统可能不太一样,各大项目现场的操作系统也不同,我们在研发不同视频平台的时候都会设计多个操作版本,在我们的官网上都能够下载试用,运行正常...

    EasyNVR
  • 一篇文章带你了解JavaScript 数值方法(下篇)

    上篇文章我们已经介绍了三种基本的JavaScript数值方法,这篇文章紧承上篇文章,继续介绍剩下的两种avaScript数值方法和将变量转换为数字的三种方式。

    前端进阶者
  • FaaS 给前端带来了什么?

    Serverless 是一种云计算理念,即无服务器计算(Serverless Computing):

    ayqy贾杰
  • PHP制作 微信、支付宝、QQ支付多合一收款二维码

    游魂

扫码关注云+社区

领取腾讯云代金券