微信小程序实现吸顶特效


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 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
一个数据采集类
2007/02/14 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php上传文件常见问题总结
2015/02/03 PHP
twig里使用js变量的方法
2016/02/05 PHP
JavaScript使用cookie
2007/02/02 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
幼儿园保教管理制度
2014/02/03 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
小学教师党员承诺书
2015/04/27 职场文书
用电申请报告范文
2015/05/18 职场文书
工资证明格式模板
2015/06/12 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
处理canvas绘制图片模糊问题
2022/05/11 Javascript