微信小程序实现吸顶特效
程序员文章站
2022-09-02 09:35:11
本文实例为大家分享了微信小程序实现吸顶特效的具体代码,供大家参考,具体内容如下
效果图
wxml代码:
本文实例为大家分享了微信小程序实现吸顶特效的具体代码,供大家参考,具体内容如下
效果图
wxml代码:
<view class="xiding {{onefixed}}" id="tab"> <van-row custom-class="goods_row" > <van-col span="12" custom-class="title-1"> 食疗方法 </van-col> <van-col span="12" custom-class="title-2" > 动作方法 </van-col> </van-row> </view>
wxss代码:
/* 吸顶开始 */ .xiding { width: 100%; height: 30px; background: white; } .title-1 { text-align: center; } .title-2 { text-align: center; } /* 吸顶 */ .fixed { position: fixed; top: 0; z-index: 2; } /* 吸顶结束 */
wxjs代码:
onefixed:"", tabtop:"0", // 吸顶动态监听函数 onpagescroll:function(event) { console.log(event.scrolltop > this.data.tabtop) if(event.scrolltop>this.data.tabtop) { if(this.data.tabfix) { return } else{ this.setdata({ onefixed:"fixed"//添加吸顶类 }) } } else { this.setdata({ onefixed:'' }) } }, /** * 生命周期函数--监听页面显示 */ onshow: function () { let this=this; const query=wx.createselectorquery(); query.select('#tab').boundingclientrect(function(res) { this.data.tabtop=res.top//255 } ).exec(); },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。