微信小程序如何实现吸顶效果，适用于长尾关键词优化？

本文共计1113个文字，预计阅读时间需要5分钟。

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

改写后：以下以微信小程序为例，展示了实现简单吸顶效果的代码示例，供大家参考。具体内容包含：页面进入后先显示banner布局，接着是tab切换栏和页面内容。当页面滚动至特定位置时，吸顶效果启动。

本文实例为大家分享了微信小程序实现简单吸顶效果的具体代码，供大家参考，具体内容如下

需求：进入页面后首先看到banner布局，然后是tab切换栏以及页面内容，当页面滚动到一定距离后，tab切换栏始终固定在顶部

wxml部分代码如下：

<!--pages/test/test.wxml--> <view style="padding-bottom:30rpx;position:fixed;top:0;width:100%;background:#2ea7e0;">     <view class="wehx-top_input weui-flex">         <!-- 搜索框 -->         <view class="weui-flex__item">             <view class="wehx-search__form">                 <view class="wehx-search__box">                     <icon class="weui-icon-search_in-box" type="search" size="17" color="#0C98C5"></icon>                     <input type="text" class="wehx-search__input" placeholder-class="wehx-input_placeholder" placeholder="关键字搜索,空格隔开" confirm-type="search" bindconfirm="search" value="{{search}}" />                     <view class="weui-icon-clear" wx:if="{{search}}" bindtap="clearSearch">                         <icon type="clear" size="14" color="#2ea7e0"></icon>                     </view>                 </view>             </view>         </view>         <view bindtap='toSend' style="display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:0 20rpx;color:#ffffff;">             <text class="iconfont icon-fabu-copy" style="font-size:40rpx;line-height:40rpx;"></text>             <view style="color:#ffffff;font-size:20rpx;padding-top:6rpx;">发单</view>         </view>     </view> </view> <!-- 用于吸顶后 占位用的 --> <view style="height:92rpx;width:100%;"></view> <view style="width: 90%; height: 300rpx; background: red; 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> <block wx:for="{{20}}" wx:key="list">     <view style="width: 100%; height: 120rpx; background: #f0f0f0; margin: 20rpx auto;"></view> </block>

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部分代码如下：

{   "navigationBarTitleText": "测试",   "usingComponents": {} }

最终效果：

未吸顶：

吸顶后：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。