本文实例为大家分享了微信小程序实现吸顶盒效果的具体代码，供大家参考，具体内容如下
html部分
<!-- 列表 -->
<view class="partner-content-container mt15">
<!-- 吸顶盒 -->
<view class="partner-list-header {{isFixedTop?'tab-fixed':''}}" id='operation-bar'>
<view class="partner-list-title">合伙人</view>
<view class="partner-list-title icon-container" style="width:60%!important">
<text>操作</text>
<image src="../../../../static/imges/right_arrow.webp" class="right-arrow" mode="widthFix"></image>
</view>
</view>
<!-- 用于吸顶后 占位用的 -->
<view class="partner-list-header" wx:if="{{isFixedTop}}"></view>
<!-- 列表 -->
<view class="partner-list-content" wx:for='{{memLs}}' wx:key='index'>
<view class="item-desc">{{item.agent_name}}</view>
<view class="co-wrapper">
<view>
<scroll-view scroll-x="true" style=" white-space: nowrap; " >
<text class="co-btn" bindtap="toMember" data-g="{{item.agent_id}}" data-storename='{{item.agent_name}}'>成员管理</text>
<text class="co-btn" bindtap="toMachineList" data-g="{{item.agent_id}}" data-storename='{{item.agent_name}}'>设备管理</text>
<text class="co-btn" bindtap="toPoint" data-g="{{item.agent_id}}" data-storename='{{item.agent_name}}'>门店管理</text>
</scroll-view>
</view>
<view>
<scroll-view scroll-x="true" style=" white-space: nowrap; " >
<text class="co-btn" bindtap="toReplnishApply" data-g="{{item.agent_id}}" data-storename='{{item.agent_name}}'>补货申请</text>
<text class="co-btn" bindtap="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: 3rpx dashed #b2b3b2;
margin: 0 20rpx;
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: 0 20rpx;
}
.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(14 37 199);
font-size: 24rpx;
margin-top: 10rpx;
border-radius: 10rpx;
color: #fff;
padding: 18rpx 22rpx;
margin:0 10rpx 0 0;
}
js部分
data:{
navbarInitTop: 0, //导航栏初始化距顶部的距离
isFixedTop: false, //是否固定顶部
}
/*监听页面滑动事件*/
onPageScroll: function(e) {
let that = this;
let scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
let isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
//为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
if (that.data.isFixedTop === isSatisfy) {
return false;
}
that.setData({
isFixedTop:isSatisfy
})
},
onShow: function () {
let that = this;
wx.createSelectorQuery().select('#operation-bar').boundingClientRect(function(rect) {
if (rect && rect.top > 0) {
var navbarInitTop = parseInt(rect.top);
that.setData({
navbarInitTop: navbarInitTop
});
console.log(that.data.navbarInitTop)
}
}).exec();
},
wx.createSelectorQuery().select('#operation-bar').boundingClientRect(function(rect)}rect值可能为null
有查询节点需求可以用延时方法或者操作事件来获取。
