微信小程序实现吸顶特效


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 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
webpack入门+react环境配置
Feb 08 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 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
十天学会php之第十天
2006/10/09 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
js运动应用实例解析
2015/12/28 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python 备份程序代码实现
2017/03/06 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
win10安装python3.6的常见问题
2020/07/01 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
办理护照工作证明
2014/10/10 职场文书
干部作风建设心得体会
2014/10/22 职场文书
市场总监岗位职责
2015/02/11 职场文书
学校重阳节活动总结
2015/03/24 职场文书
政协常委会议主持词
2015/07/03 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书