微信小程序> 微信小程序中实现吸顶效果流畅不卡顿-酒企小程序建设方案-小程序建设方案

微信小程序中实现吸顶效果流畅不卡顿-酒企小程序建设方案-小程序建设方案

浏览量:2334 时间: 来源:自酌一杯酒

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});}})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎