第微信小程序?qū)崿F(xiàn)簡(jiǎn)單的吸頂效果本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)簡(jiǎn)單吸頂效果的具體代碼，供大家參考，具體內(nèi)容如下

需求：進(jìn)入頁面后首先看到banner布局，然后是tab切換欄以及頁面內(nèi)容，當(dāng)頁面滾動(dòng)到一定距離后，tab切換欄始終固定在頂部

wxml部分代碼如下：

!s/test/test.wxml--

view

view

!--搜索框--

view

view

view

icontype="search"size="17"color="#0C98C5"/icon

inputtype="text"placeholder-placeholder="關(guān)鍵字搜索,空格隔開"confirm-type="search"bindconfirm="search"value="{{search}}"/

viewwx:if="{{search}}"bindtap="clearSearch"

icontype="clear"size="14"color="#2ea7e0"/icon

/view

/view

/view

/view

viewbindtap='toSend'

text/text

view發(fā)單/view

/view

/view

/view

!--用于吸頂后占位用的--

view/view

view/view

view

viewclass="column{{isFixedTop'fixed':''}}"id="navbar"

view新品推薦/view

view限時(shí)優(yōu)惠/view

view火爆熱搜/view

view猜你喜歡/view

/view

/view

blockwx:for="{{20}}"wx:key="list"

view/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:solid1px#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,//導(dǎo)航欄初始化距頂部的距離

isFixedTop:false,//是否固定頂部

/**

*生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad:function(options){

/**

*生命周期函數(shù)--監(jiān)聽頁面顯示

*/

onShow:function(){

varthat=this;

if(that.data.navbarInitTop==0){

console.log(that.data.navbarInitTop)

//獲取節(jié)點(diǎn)距離頂部的距離

wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect){

if(rectrect.top0){

console.log(rect.top-92)

//92是頁面搜索框一欄整體的高度

若無搜索欄一項(xiàng)時(shí)可以不加此項(xiàng)目

varnavbarInitTop=parseInt(rect.top-92);

that.setData({

navbarInitTop:navbarInitTop

});

}

}).exec();

}

/**

*監(jiān)聽頁面滑動(dòng)事件

*/

onPageScroll:function(e){

varthat=this;

varscrollTop=parseInt(e.scrollTop);//滾動(dòng)條距離頂部高度

//console.log(e.scrollTop)//滾動(dòng)149rpx

//滾動(dòng)條距離頂部高度

//判斷'滾動(dòng)條'滾動(dòng)的距離和'元素在初始時(shí)'距頂部的距離進(jìn)行判斷

varisSatisfy=scrollTop=(that.data.navbarInitTop)true:false;

//為了防止不停的setData,這兒做了一個(gè)等式判斷。只有處于吸頂?shù)呐R界值才會(huì)不相等

if(that.data.isFixedTop===isSatisfy){

returnfalse;

}

that.setDat