微客导航 » 文章资讯 » 微信小程序实现吸顶特效

微信小程序实现吸顶特效

2023-08-03 09:15:05 287

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

效果图

wxml代码：




食疗方法


动作方法

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(){
letThis=this;
constquery=wx.createSelectorQuery();
query.select('#tab').boundingClientRect(function(res)
{
This.data.tabTop=res.top//255
}
).exec();
},

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

微信小程序实现吸顶特效

热门推荐

随机推荐