微信小程序实现吸顶特效
程序员文章站
2022-04-09 17:01:59
本文实例为大家分享了微信小程序实现吸顶特效的具体代码，供大家参考，具体内容如下
效果图
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();
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： android自定义环形统计图动画
下一篇： JS只执行一次