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

html部分

!--列表--

view

!--吸頂盒--

viewclass="partner-list-header{{isFixedTop'tab-fixed':''}}"id='operation-bar'

view合伙人/view

view

text操作/text

imagesrc="../../../../static/imges/right_arrow.png"mode="widthFix"/image

/view

/view

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

viewwx:if="{{isFixedTop}}"/view

!--列表--

viewwx:for='{{memLs}}'wx:key='index'

view{{item.agent_name}}/view

view

view

scroll-viewscroll-x="true"

textbindtap="toMember"data-g="{{item.agent_id}}"data-storename='{{item.agent_name}}'成員管理/text

textbindtap="toMachineList"data-g="{{item.agent_id}}"data-storename='{{item.agent_name}}'設備管理/text

textbindtap="toPoint"data-g="{{item.agent_id}}"data-storename='{{item.agent_name}}'門店管理/text

/scroll-view

/view

view

scroll-viewscroll-x="true"

textbindtap="toReplnishApply"data-g="{{item.agent_id}}"data-storename='{{item.agent_name}}'補貨申請/text

textbindtap="toReplnishApplyList"data-g="{{item.agent_id}}"data-storename='{{item.agent_name}}'補貨申請記錄/text

/scroll-view

/view

/view

/view

/view

css部分

.partner-content-container{

width:100%;

background:#fff;

.partner-list-header{

display:flex;

justify-content:space-around;

height:80rpx;

line-height:80rpx;

border-bottom:3rpxdashed#b2b3b2;

margin:020rpx;

font-weight:bold;

background:#fff;

width:100%;

.tab-fixed{

position:fixed;

top:0;

left:0;

z-index:1;

.partner-list-title{

width:40%;

text-align:center;

.icon-container{

display:flex;

justify-content:center;

align-items:center;

.right-arrow{

width:50rpx;

margin-right:20rpx;

.partner-list-content{

display:flex;

justify-content:space-around;

align-items:center;

background:#fff;

line-height:100rpx;

margin:020rpx;

.co-wrapper{

width:55%;

box-sizing:border-box;

.item-desc{

width:45%;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

text-align:center;

.co-btn{

background:rgb(1437199);

font-size:24rpx;

margin-top:10rpx;

border-radius:10rpx;

color:#fff;

padding:18rpx22rpx;

margin:010rpx00;

}

js部分

data:{

navbarInitTop:0,//導航欄初始化距頂部的距離

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

/*監(jiān)聽頁面滑動事件*/

onPageScroll:function(e){

letthat=this;

letscrollTop=parseInt(e.scrollTop);//滾動條距離頂部高度

letisSatisfy=scrollTop=that.data.navbarInitToptrue:false;

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

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

returnfalse;

}

that.setData({

isFixedTop:isSatisfy

})

},

onShow:function(){

letthat=this;

wx.createSelectorQuery().select('#operation-bar').boundingClientRect(function(rect){

if(rectrect.top0){

varnavbarInitTop=parseInt(rect.top);

that.setData({

navbarInitTop:navbarInitTop

});

console.log(that.data.navbarInitTop)

}