微信小程序?qū)崿F(xiàn)吸頂盒效果

更新時(shí)間：2022年06月30日 16:54:12 作者：m0_57568275

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)吸頂盒效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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.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" 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}}'>設(shè)備管理</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}}'>補(bǔ)貨申請</text>
? ? ? ? ? ? ? ? ? ? ? ? <text class="co-btn" bindtap="toReplnishApplyList" data-g="{{item.agent_id}}" data-storename='{{item.agent_name}}'>補(bǔ)貨申請記錄</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, //導(dǎo)航欄初始化距頂部的距離
　?isFixedTop: false, //是否固定頂部
}
/*監(jiān)聽頁面滑動事件*/
? ? onPageScroll: function(e) {
? ? ? ?let that = this;
? ? ? ?let scrollTop = parseInt(e.scrollTop); //滾動條距離頂部高度
? ? ? ?let isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
? ? ? ?//為了防止不停的setData, 這兒做了一個(gè)等式判斷。 只有處于吸頂?shù)呐R界值才會不相等
? ? 　?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

有查詢節(jié)點(diǎn)需求可以用延時(shí)方法或者操作事件來獲取。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: