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


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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
dwr spring的集成实现代码
Mar 22 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
JS中Array数组学习总结
Jan 18 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 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 XML备份Mysql数据库
2009/05/27 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
JS location几个方法小姐
2008/07/09 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
python实现代理服务功能实例
2013/11/15 Python
python显示天气预报
2014/03/02 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
pytorch中index_select()的用法详解
2021/01/06 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
英文版区域经理求职信
2013/10/23 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
军人离婚协议书样本
2014/10/21 职场文书
2014年租房协议书范本
2014/10/30 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
Python之基础函数案例详解
2021/08/30 Python