微信小程序如何实现类似吸顶盒效果的长尾词滚动功能？

本文共计797个文字，预计阅读时间需要4分钟。

本示例为家庭分享了微信小程序实现吸顶效果的具体代码，供大家参考。以下为代码示例：

+部分+列表+view class=partner-content-container mt15+吸顶+view

本文实例为大家分享了微信小程序实现吸顶盒效果的具体代码，供大家参考，具体内容如下

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}}'>设备管理</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

有查询节点需求可以用延时方法或者操作事件来获取。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。