微信小程序怎么實現吸頂盒效果

本文小編為大家詳細介紹“微信小程序怎么實現吸頂盒效果”，內容詳細，步驟清晰，細節處理妥當，希望這篇“微信小程序怎么實現吸頂盒效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

有查詢節點需求可以用延時方法或者操作事件來獲取。

讀到這里，這篇“微信小程序怎么實現吸頂盒效果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。