微信小程序局部刷新触发整页刷新效果的实现代码


Posted in Javascript onNovember 21, 2018

效果图

微信小程序局部刷新触发整页刷新效果的实现代码

如上图所示,头部的选项栏时固定的(fixed),下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果,如果去掉fixed当我们上拉的时候,选项栏又无法固定,所以我们需要监听页面下拉的状态随时改变选项栏的状态

1获取滚动状态

onPageScroll(e) {
  this.scrollTop = e.scrollTop
 },

2信息栏监听下拉状态的改变而改变自己的状态

:class="scrollTop>0?'head-title-fixed':'head-title-absolute'"

 .head-title-absolute{
  top: 0;position: absolute;
 }
 .head-title-fixed{
  top: 0;position: fixed;
 }

总结

以上所述是小编给大家介绍的微信小程序局部刷新触发整页刷新效果的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
Nov 28 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
JavaScript实现下拉列表
Jan 20 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 #Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 #Javascript
JSON生成Form表单的方法示例
Nov 21 #Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 #Javascript
vue中组件的过渡动画及实现代码
Nov 21 #Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 #Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 #Javascript
You might like
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python3 能振兴 Python的原因分析
2014/11/28 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
管理部部长岗位职责
2013/12/05 职场文书
高中英语教学反思
2014/02/04 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
工作目标责任书
2014/07/23 职场文书
英文演讲稿开场白
2014/08/25 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书