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

 更新时间:2018年11月21日 14:52:31   作者:白马湖小龙王  
这篇文章主要介绍了微信小程序局部刷新触发整页刷新效果的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

效果图

如上图所示,头部的选项栏时固定的(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;
 }

总结

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

相关文章

  • 7个去伪存真的JavaScript面试题

    7个去伪存真的JavaScript面试题

    这篇文章主要为大家分享了7个去伪存真的JavaScript面试题,希望本文可以帮助大家比较顺利的通过面试,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • js判断是否是手机页面

    js判断是否是手机页面

    本文主要介绍了js判断是否是手机页面的方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript闭包_动力节点Java学院整理

    JavaScript闭包_动力节点Java学院整理

    这篇文章主要介绍了JavaScript闭包,闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现
    2017-06-06
  • 关闭页面window.location事件未执行的原因及解决方法

    关闭页面window.location事件未执行的原因及解决方法

    这篇文章主要介绍了关闭页面window.location事件未执行的原因及解决方法,需要的朋友可以参考下
    2014-09-09
  • JavaScript 处理树数据结构的方法示例

    JavaScript 处理树数据结构的方法示例

    这篇文章主要介绍了JavaScript 处理树数据结构的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • JS实现给对象动态添加属性的方法

    JS实现给对象动态添加属性的方法

    这篇文章主要介绍了JS实现给对象动态添加属性的方法,涉及JS属性的遍历、动态赋值及eval方法的简单使用技巧,需要的朋友可以参考下
    2017-01-01
  • js对数组中的数字从小到大排序实现代码

    js对数组中的数字从小到大排序实现代码

    对数组中的数字从小到大排序,很多时候需要用的多,需要的朋友可以参考下
    2012-09-09
  • JavaScript+html实现前端页面随机二维码验证

    JavaScript+html实现前端页面随机二维码验证

    这篇文章主要为大家详细介绍了JavaScript+html实现前端页面随机二维码验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 在JavaScript中使用严格模式(Strict Mode)

    在JavaScript中使用严格模式(Strict Mode)

    这篇文章主要介绍了在JavaScript中使用严格模式(Strict Mode),除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。,需要的朋友可以参考下
    2019-06-06
  • javascript数组去掉重复

    javascript数组去掉重复

    去tx面试过几次,基本都会考到数组去重。其实平时工作中几乎不会用到,再者也没认真去了解过,所以基本上每次面到这里都会露出很大的马脚,面试自然也over了
    2011-05-05

最新评论