微信小程序吸顶盒
m0_57568275 人气:0html部分
<!-- 列表 --> <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}}'>设备管理</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
有查询节点需求可以用延时方法或者操作事件来获取。
加载全部内容