本文小编为大家详细介绍“微信小程序怎么实现吸顶盒效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序怎么实现吸顶盒效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
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" >
<text>操作</text>
<image src="../../../../static/imges/right_arrow.png" 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" >
<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" >
<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
有查询节点需求可以用延时方法或者操作事件来获取。
读到这里，这篇“微信小程序怎么实现吸顶盒效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
