微信小程序实现吸顶特效
更新时间：2020年01月08日 14:26:08 作者：xcjlk
这篇文章主要为大家详细介绍了微信小程序实现吸顶特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现吸顶特效的具体代码，供大家参考，具体内容如下
效果图
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();
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了微信小程序自定义底部弹出框功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要为大家详细介绍了基于JavaScript实现放大镜放大购物图片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了微信小程序之高德地图多点路线规划过程示例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
微信小程序的云开发功能刚刚上线，这篇文章主要介绍了小程序云开发部署攻略(图文教程)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了js表达式与运算符简单操作,结合实例形式分析了JavaScript表达式与运算符的基本算数运算、逻辑运算、比较运算等相关操作技巧,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了使用Vue3实现一个Upload组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了微信小程序全局变量的设置、使用、修改过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
我第一次听说编码原则中有“尽快失败”这一条时，觉得很奇怪，为什么代码要失败？应该成功才对呀。下面小编通过实例代码给大家介绍js 尽快失败的原则，一起看看吧2016-10-10
下面小编就为大家带来一篇浅谈webpack下的AOP式无侵入注入。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要为大家分享了js事件委托和事件代理案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论