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


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 IFrame 强制刷新代码
Jul 23 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
js获取 type=radio 值的方法
May 09 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
跨域解决之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实现简单洗牌算法
2013/06/18 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
详解Python多线程
2016/11/14 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
JAVA和C++区别都有哪些
2015/03/30 面试题
创业计划书的内容步骤和要领
2014/01/04 职场文书
中国央视网签名寄语
2014/01/18 职场文书
优秀幼教自荐信
2014/02/03 职场文书
学徒工职责
2014/03/06 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
2014年售票员工作总结
2014/11/19 职场文书
优秀志愿者感言
2015/08/01 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Python机器学习之PCA降维算法详解
2021/05/19 Python
Python  lambda匿名函数和三元运算符
2022/04/19 Python
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript