微信小程序实现简单的吸顶效果微信小程序实现简单的吸顶效

本文实例为大家分享了微信小程序实现简单吸顶效果的具体代码，供大家参考，具体内容如下
需求：进入页面后首先看到banner布局，然后是tab切换栏以及页面内容，当页面滚动到一定距离后，tab切换栏始终固定在顶部
wxml部分代码如下：

发单新品推荐限时优惠火爆热搜猜你喜欢

wxss部分代码如下：

/* pages/test/test.wxss */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: 82rpx; 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; top: 92rpx; }/* 以下的代码不重要 */.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%); }/* 顶部栏目布局 */.wehx-search__form {overflow: hidden; background: #fff; border-radius: 30rpx; }.wehx-top_input {height: 62rpx; padding-left: 20rpx; background: #2ea7e0; }.wehx-search__box {position: relative; padding-left: 68rpx; }.wehx-search__input {height: 62rpx; font-size: 28rpx; border-radius: 32.5rpx; margin-right: 50px; }

js部分代码如下：

Page({data: {navbarInitTop: 0, //导航栏初始化距顶部的距离isFixedTop: false, //是否固定顶部},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面显示*/onShow: function () {var that = this; if (that.data.navbarInitTop == 0) {console.log(that.data.navbarInitTop)//获取节点距离顶部的距离wx.createSelectorQuery().select('#navbar').boundingClientRect(function (rect) {if (rect && rect.top > 0) {console.log(rect.top - 92)//92是页面搜索框一栏整体的高度若无搜索栏一项时可以不加此项目var navbarInitTop = parseInt(rect.top - 92); that.setData({navbarInitTop: navbarInitTop}); }}).exec(); }},/*** 监听页面滑动事件*/onPageScroll: function (e) {var that = this; var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度// console.log(e.scrollTop) //滚动149rpx//滚动条距离顶部高度//判断'滚动条'滚动的距离和 '元素在初始时'距顶部的距离进行判断var isSatisfy = scrollTop >= (that.data.navbarInitTop) ? true : false; //为了防止不停的setData, 这儿做了一个等式判断。只有处于吸顶的临界值才会不相等if (that.data.isFixedTop === isSatisfy) {return false; }that.setData({isFixedTop: isSatisfy}); }})

json部分代码如下：