微信小程序实现简单吸顶效果
更新时间:2022年01月17日 09:15:40 作者:qq_36437172
这篇文章主要为大家详细介绍了微信小程序实现简单吸顶效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现吸顶效果的具体代码,供大家参考,具体内容如下
吸顶效果思路:
1.首先获取 Tab 栏与顶部的距离;
2.监听页面滚动事件 onPageScroll,判断 Tab 栏是否滚动到顶部;
3.当 Tab 栏滚动到顶部时,添加吸顶样式,实现效果。
Page({ data: { navbarInitTop: 0, //导航栏初始化距顶部的距离 isFixedTop: false, //是否固定顶部 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { var that = this; if (that.data.navbarInitTop == 0) { //获取节点距离顶部的距离 wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect) { if (rect && rect.top > 0) { var navbarInitTop = parseInt(rect.top); that.setData({ navbarInitTop: navbarInitTop }); } }).exec(); } }, /** * 监听页面滑动事件 */ onPageScroll: function(e) { var that = this; var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度 //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断 var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false; // 只有处于吸顶的临界值才会不相等 if (that.data.isFixedTop === isSatisfy) { return false; } that.setData({ isFixedTop: isSatisfy }); } })
代码部分
<view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view> <view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view> <view class="navbar-wrap"> <view class="column {{isFixedTop?'fixed':''}}" id="navbar"> <view class="block active">新品推荐</view> <view class="block">限时优惠</view> <view class="block">火爆热搜</view> <view class="block">猜你喜欢</view> </view> <!-- 用于吸顶后 占位用的 --> <view class="column" wx:if="{{isFixedTop}}"></view> </view> <block wx:for="{{20}}" wx:key="list"> <view style="width: 100%; height: 120rpx; background: #f0f0f0; margin: 20rpx auto;"></view> </block>
页面样式:
view, text { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .navbar-wrap { width: 100%; } .navbar-wrap .column { width: 100%; height: 80rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-around; background: #fff; border-bottom: solid 1px #eee; top: 0; left: 0; z-index: 100; } .navbar-wrap .column.fixed { position: fixed; } /* 以下的代码不重要 */ .navbar-wrap .column .block { width: 25%; height: 80rpx; line-height: 80rpx; text-align: center; font-size: 30rpx; color: #333; letter-spacing: 1px; position: relative; } .navbar-wrap .column .block::after { content: ""; width: 60%; height: 3px; border-radius: 2px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: transparent; } .navbar-wrap .column .block.active { color: #1490ce; font-weight: bold; } .navbar-wrap .column .block.active::after { background: linear-gradient(160deg, rgba(8, 220, 230, 0.7) 10%, rgba(0, 140, 255, 0.7) 90%); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Javascript将图片的绝对路径转换为base64编码的方法
这篇文章主要介绍了Javascript将图片的绝对路径转换为base64编码的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-01-01最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
这篇文章主要介绍了最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式,其中包含保留1位小数、保留2位小数、保留3位小数等正则,需要的朋友可以参考下2015-04-04极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
这篇文章主要为大家极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg,是一款基于jquery和bootstrap的可视化编辑器,感兴趣的小伙伴们可以参考一下2016-05-05兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
其中对于IE的检测很有意思。 以上代码,整理自Extjs的脚本,完全可以代替 Ext.onReady使用。2009-07-07
最新评论