微信小程序实现吸顶特效


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 相关文章推荐
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
jquery 插件学习(一)
Aug 06 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
javascript常用代码段搜集
Dec 04 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
javascript头像上传代码实例
Sep 28 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 ajax 分页类代码
2008/11/13 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
javascript常用功能汇总
2015/07/05 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
python实现学生信息管理系统
2020/04/05 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Python如何将模块打包并发布
2020/08/30 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
建筑公司文秘岗位职责
2013/11/29 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
授权委托书格式
2014/07/31 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
检讨书范文
2015/01/27 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
股东协议书范本2016
2016/03/21 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书