微信小程序第六篇：元素吸顶效果实现

系列文章传送门：

微信小程序第一篇：自定义组件详解

微信小程序第二篇：七种主流通信方法详解

微信小程序第三篇：获取页面节点信息

微信小程序第四篇：生成图片并保存到手机相册

微信小程序第五篇：页面弹出效果及共享元素动画

话不多说，先看效果：

这种效果在我们日常开发中是非常常见的，下面让我们结合代码一起来看看是如何实现的吧。

js 部分数据：

data: {content: {value: '啦啦啦',isShow: false},message: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],mainHeight: app.globalData.wHeight - app.globalData.headerHeight},

wxml部分代码：

<template name="scrollData"><view style="height: 100rpx; width: 90%;margin: 20rpx auto;background-color: rgb(172, 212, 219);">{{item}}</view>
</template><view><header bg="{{'transparent'}}">YinJie</header><view style="height: 60rpx;width: 100%;background-color: pink;text-align: center;font-size: 22rpx;position: fixed;z-index: 999;"wx:if="{{content.isShow}}">{{content.value}}</view>  <scroll-view class="" scroll-y="true" bindscroll="scroll" enable-flex="true" style="height: {{mainHeight}}rpx;"><view style="height: 400rpx; width:90%; margin: 0 auto; background-color: grey"></view><view style="height: 60rpx;width: 100%;background-color: pink;text-align: center;font-size: 22rpx;margin-top: 20rpx;">啦啦啦</view><template is="scrollData" data="{{item}}" wx:for="{{message}}" wx:key="index"></template></scroll-view>
</view>

我们要实现“啦啦啦”所在的元素块在移动到它的时候吸顶，那必然需要结合 scroll-view 标签的 bindscroll 属性实现，吸顶的关键就是我们在header标签下写一个和要吸顶元素一模一样的wxml元素。通过 wx:if 来控制它的显示与隐藏，当页面移动到“啦啦啦”所在位置的时候显示这个元素，并且让他的 position 为 fixed，这样就巧妙实现了元素的吸顶效果。

  scroll: function(e) {if (e.detail.scrollTop >= 216) {if (!this.data.content.isShow) {this.setData({'content.isShow': true})}} else {if (this.data.content.isShow) {this.setData({'content.isShow': false})}}},

当页面距离顶部高度超过 216 也就是 “啦啦啦” 所在元素高度时，就让 header 下的元素显示。反之，当页面距离顶部高度小于 216 时再让他隐藏就可以啦！

微信小程序第六篇：元素吸顶效果实现相关推荐

微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
微信小程序实现tab切换和吸顶效果
在项目中合理的采用webapp的组件库能够很好的提高我们的开发效率,我们也应该合理的进行运用. 首先我们是对手机的状态栏的代码进行了自定义. 其次就是采用组件库的van-sticky进行吸顶距离计算 ...
入门微信小程序[第六篇]微信小程序 -- 大樱桃的安排
经过一番努力,我的直接上司"大樱桃"终于满意了并且交给了我第一个小程序项目. 小乖猴助手老沙很高兴,终于可以实际的编码了,对于一个100%的码农来说,这是何等的愉悦. 这是一个家 ...
html5导航栏悬浮置顶,（微信小程序）导航栏悬浮吸顶以及置顶的设置
前言最近在做小程序的项目,遇到一些问题放在这里,一来作为自己经验收集册,收集自己的项目遇到的问题或者做的东西:二来将自己遇到的问题经验分享出来前景提要吸顶功能页面设置在静态的首页,作为一个首页展 ...
微信小程序第五篇：页面弹出效果及共享元素动画
系列文章传送门: 微信小程序第一篇:自定义组件详解微信小程序第二篇:七种主流通信方法详解微信小程序第三篇:获取页面节点信息微信小程序第四篇:生成图片并保存到手机相册目录一.page-caon ...
微信小程序之拓展篇——weui-wxss
微信小程序之入门篇(一) 微信小程序之注册篇(二) 微信小程序之开发初体验(三)--开发工具使用和目录结构微信小程序之生命周期(四) 微信小程序之数据绑定(五) 微信小程序之触控事件(六) 微信小程 ...
【微信小程序开发学习篇】
微信小程序开发学习篇概述相关信息笔记制作时间:2022-9-25 参考视频:黑马视频参考文档:微信小程序官方开发文档文章目录微信小程序开发学习篇概述相关信息小程序基础 1.数据绑定与 ...
微信小程序填坑篇 2
微信小程序开发的时候,很多接口都不太能信任,需要作一些额外的兜底处理.保证程序在什么情况下都能尽可能健康的运行. 也要有一套健全的异常收集反馈机制,方便迅速发现问题解决问题. 小程序生态的异常监控体系 ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...

微信小程序第六篇：元素吸顶效果实现

微信小程序第六篇：元素吸顶效果实现相关推荐

最新文章

热门文章