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

 更新时间:2018-11-22 04:00:50   作者:佚名   我要评论(0)

效果图

如上图所示,头部的选项栏时固定的(fixed),下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果,如果去掉fixed当我们上拉的时候,

效果图

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

总结

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

您可能感兴趣的文章:

  • 微信小程序实现列表下拉刷新上拉加载
  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
  • 微信小程序实现下拉刷新和轮播图效果
  • 微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
  • 微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
  • 微信小程序 列表的上拉加载和下拉刷新的实现
  • 微信小程序 scroll-view实现上拉加载与下拉刷新的实例
  • 微信小程序 详解下拉加载与上拉刷新实现方法
  • 微信小程序(六):列表上拉加载下拉刷新示例
  • 详解微信小程序开发之下拉刷新 上拉加载
  • 微信小程序 实现列表刷新的实例详解

相关文章

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

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

    效果图 如上图所示,头部的选项栏时固定的(fixed),下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果,如果去掉fixed当我们上拉的时候,
    2018-11-22
  • 完美实现ExpandableListView二级分栏效果

    完美实现ExpandableListView二级分栏效果

    本文实例为大家分享了ExpandableListView二级分栏效果的具体代码,供大家参考,具体内容如下 对ExpandableListView控件进行封装(未自定义)直接上代码:
    2018-11-22
  • Vue动态加载异步组件的方法

    Vue动态加载异步组件的方法

    背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品。目前都是采用iframe直接嵌套页面。项目中我们还是会碰到一些通用的组件跟业务之间有通信
    2018-11-22
  • 易语言快捷搜索信息与快捷录入信息的代码

    易语言快捷搜索信息与快捷录入信息的代码

    快捷录入信息与关键词匹配功能代码 .版本 2 .程序集 窗口程序集1 .程序集变量 快捷信息, 文本型 .程序集变量 分割信息, 文本型, , "0" .子程序 _输入编辑框
    2018-11-22
  • 易语言取出两个编辑框中相同内容的代码

    易语言取出两个编辑框中相同内容的代码

    对比两个编辑框内容的代码 .版本 2 .程序集 窗口程序集1 .子程序 _对比按钮_被单击 .局部变量 循环计次1, 整数型 .局部变量 文本1, 文本型, , "0" .局部变量
    2018-11-22
  • Android Camera2 实现预览功能

    Android Camera2 实现预览功能

    1. 概述 最近在做一些关于人脸识别的项目,需要用到 Android 相机的预览功能。网上查阅相关资料后,发现 Android 5.0 及以后的版本中,原有的 Camera API 已经
    2018-11-22
  • 易语言自定义数据类型的使用代码

    易语言自定义数据类型的使用代码

    自定义数据类型表 .版本 2 .数据类型 消息类型 .成员 键盘消息, 文本型 自定义数据类型使用代码 .版本 2 .程序集 窗口程序集1 .子程序 _按钮1_被单击
    2018-11-22
  • android实现菜单三级树效果

    android实现菜单三级树效果

    本文实例为大家分享了android实现菜单三级树展示的具体代码,供大家参考,具体内容如下 以下是部分代码,完整代码请在最下面点击下载: 【MainActivity】
    2018-11-22
  • Android自定义简单的顶部标题栏

    Android自定义简单的顶部标题栏

    本文实例为大家分享了Android实现简单顶部标题栏的具体代码,供大家参考,具体内容如下 实现功能: 1)自定义View标题栏布局; 2)灵活的可以自己传入类型
    2018-11-22
  • Android ExpandableListView双层嵌套实现三级树形菜单

    Android ExpandableListView双层嵌套实现三级树形菜单

    在Android开发中,列表可以说是最常见的了,一般都是使用ListView,当涉及到二维数组时,更多的使用到ExpandableListView,然而当数据结构比较复杂时,就需要
    2018-11-22

最新评论