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


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 相关文章推荐
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
jQuery的文档处理程序详解
May 10 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
angular动态表单制作
Feb 23 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
JavaScript实现tab栏切换效果
Mar 16 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python实现画一颗树和一片森林
2018/06/25 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
英国工具中心:UK Tool Centre
2017/07/10 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
办公室秘书岗位职责范本
2014/02/11 职场文书
年终晚会主持词
2014/03/25 职场文书
小小商店教学反思
2014/04/27 职场文书
广告学专业求职信
2014/06/19 职场文书
教师自查自纠材料
2014/10/14 职场文书
员工辞职信范文大全
2015/05/12 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏