1.最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了。原因是我不停的去setData会导致操作反馈延迟严重,无法及时将操作处理结果及时传递到视图层。
2.后面就对代码进行了调整,避免不停的去setData
效果图3.吸顶前
4.吸顶后
代码部分wxmlviewstyle="width:90%;height:300rpx;background:#f0f0f0;margin:30rpxauto;"/viewviewstyle="width:90%;height:300rpx;background:#f0f0f0;margin:30rpxauto;"/viewviewclass="navbar-wrap"viewclass="column{{isFixedTop?'fixed':''}}"id="navbar"viewclass="blockactive"新品推荐/viewviewclass="block"限时优惠/viewviewclass="block"火爆热搜/viewviewclass="block"猜你喜欢/view/view!--用于吸顶后占位用的--viewclass="column"wx:if="{{isFixedTop}}"/view/viewblockwx:for="{{20}}"wx:key="list"viewstyle="width:100%;height:120rpx;background:#f0f0f0;margin:20rpxauto;"/view/blockwxssview,text{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}.navbar-wrap{width:100%;}.navbar-wrap.column{width:100%;height:80rpx;display:flex;flex-direction:row;align-items:center;justify-content:space-around;background:#fff;border-bottom:solid1px#eee;top:0;left:0;z-index:100;}.navbar-wrap.column.fixed{position:fixed;}/*以下的代码不重要*/.navbar-wrap.column.block{width:25%;height:80rpx;line-height:80rpx;text-align:center;font-size:30rpx;color:#333;letter-spacing:1px;position:relative;}.navbar-wrap.column.block::after{content:"";width:60%;height:3px;border-radius:2px;position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:transparent;}.navbar-wrap.column.block.active{color:#1490ce;font-weight:bold;}.navbar-wrap.column.block.active::after{background:linear-gradient(160deg,rgba(8,220,230,0.7)10%,rgba(0,140,255,0.7)90%);}jsPage({data:{navbarInitTop:0,//导航栏初始化距顶部的距离isFixedTop:false,//是否固定顶部},/***生命周期函数--监听页面加载*/onLoad:function(options){},/***生命周期函数--监听页面显示*/onShow:function(){varthat=this;if(that.data.navbarInitTop==0){//获取节点距离顶部的距离wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect){if(rectrect.top0){varnavbarInitTop=parseInt(rect.top);that.setData({navbarInitTop:navbarInitTop});}}).exec();}},/***监听页面滑动事件*/onPageScroll:function(e){varthat=this;varscrollTop=parseInt(e.scrollTop);//滚动条距离顶部高度//判断'滚动条'滚动的距离和'元素在初始时'距顶部的距离进行判断varisSatisfy=scrollTop=that.data.navbarInitTop?true:false;//为了防止不停的setData,这儿做了一个等式判断。只有处于吸顶的临界值才会不相等if(that.data.isFixedTop===isSatisfy){returnfalse;}that.setData({isFixedTop:isSatisfy});}})