这篇文章主要为大家详细介绍了微信小程序实现吸顶特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现吸顶特效的具体代码，供大家参考，具体内容如下
效果图
wxml代码：
<view> <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(); },
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: