微信小程序模仿APP部分标题悬停效果

许多应用程序都有这样的效果。滚动到顶部时，列表标题将悬停在顶部。例如，在iOS开发中，UITableview将style属性设置为Plain。 tableview的section标题默认位于界面顶部。

那么我们如何在微信小程序实现这样的效果呢？

首先写一个非常简单的列表：

Wxml代码

以下是标题为{{item}}

的标题 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;宽度: 750rpx;背景色:金; margin-top: 10rpx;}

Simple list effect.png那么我们如何盘旋？

1，我们需要在页面布局完成后获取头部的位置：

在onReady方法中，查询section-header节点并获取与节点当前顶部的距离。

请注意，现在是时候讨论这个了

/***页面加载完成*/onReady: function（）{let that=thislet query=wx.createSelectorQuery（）query.select（'。section-header'）。boundingClientRect（function（res）{//console.log （res）that.setData（{//section header distance'当前顶部'距离sectionHeaderLocationTop: res.top}）}）。exec（）}，

2，我们需要监控页面滚动：

Fixed用于控制是否悬停

/***页面滚动侦听器*/onPageScroll:函数（e）{//console.log(e)this.setData({scrollTop: e.scrollTop}）if（e.scrollTop＆gt; this.data.sectionHeaderLocationTop）{ this.setData（{fixed: true}）} else {this.setData（{fixed: false}）}}，

3.修改相应的样式：

将原始标题修改为以下代码，并添加占位符视图以在我们的悬停节标题视图悬停时保留占位符以避免页面抖动

这是section-header

增加wxss代码

.section-placeholder {background-color: white;}。section-fixed {position: fixed; top: 0;}

附上js数据代码:

数据: {testData: [1,2,3,4,5,6,7,8,9,10]，//节头距离'当前顶部'距离sectionHeaderLocationTop: 0，//页面滚动距离scrollTop: 0， //是否悬停固定: false}，

此时我们需要效果：

sectionHeader suspension.gif这有一点需要注意，当我们使用swlectorQuery（）时，获得的top是当前调用更改时对应当前top的对应节点的距离。当高度（不一定是截面标题上方视图的高度）发生变化时，我们的标题悬停可能会出现问题，因为我们的高度是在最开始时获得的。

因此，在我们改变高度后，我们需要再次调用此函数以获得与“当前顶部”的距离。这也是需要注意的一点。如果我可以再次分配它，我仍然发现存在问题，因为我此时得到了它。 Top不在整个页面的顶部，我们正在监控的页面是滚动的，因此我们可以按如下方式修改代码：

设那个=thislet query=wx.createSelectorQuery（）query.select（'。section-header'）。boundingClientRect（function（res）{//console.log（res）that.setData（{//section header distance'current顶部'距离sectionHeaderLocationTop: res.top + that.data.scrollTop}）}）。exec（）

加上此时页面滚动的距离，我们可以保证我们预期的效果会出现

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。