微信小程序实现吸顶特效


Posted in Javascript onJanuary 08, 2020

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

效果图

微信小程序实现吸顶特效

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();
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
JS 实现分页打印功能
May 16 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 #Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 #Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 #Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 #Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 #Javascript
js实现多个标题吸顶效果
Jan 08 #Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 #Javascript
You might like
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
django 创建过滤器的实例详解
2017/08/14 Python
Python中Threading用法详解
2017/12/27 Python
django的csrf实现过程详解
2019/07/26 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
非常详细的C#面试题集
2016/07/13 面试题
采购员的工作职责
2013/12/26 职场文书
活动策划邀请函
2014/02/06 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
新品发布会策划方案
2014/06/08 职场文书
安全生产标语大全
2014/10/06 职场文书
村干部任职承诺书
2015/01/21 职场文书
2015年药店工作总结
2015/04/20 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
排查Tomcat进程假死的问题
2022/05/06 Servers