微信小程序实现吸顶特效


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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
js文字滚动停顿效果代码
Jun 28 Javascript
jquery $.ajax入门应用二
Nov 19 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
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 一元分词算法
2009/11/30 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
用js重建星际争霸
2006/12/22 Javascript
How to Auto Include a Javascript File
2007/02/02 Javascript
用javascript做拖动布局的思路
2008/05/31 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
Python实现截屏的函数
2015/07/25 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
python文件写入write()的操作
2019/05/14 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python列表元素常见操作简单示例
2019/10/25 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
男性健康日的活动方案
2014/08/18 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
投资申请报告
2015/05/19 职场文书
2015国庆节宣传语
2015/07/14 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers