Minirefresh

优雅的 H5 下拉刷新
授权协议 MIT
开发语言 JavaScript HTML/CSS
所属分类 iOS代码库、 下拉刷新(pull-to-refresh)
软件类型 开源软件
地区 国产
投 递 者 蒋奕
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Minirefresh 是一个优雅的H5下拉刷新。零依赖,高性能,多主题,易拓展。

特点

  • 零依赖(原生JS实现,不依赖于任何库)

  • 多平台支持。一套代码,多端运行,支持Android,iOS,主流浏览器

  • 丰富的主题,官方提供多种主题(包括默认,applet-仿小程序,drawer3d-3d抽屉效果,taobao-仿淘宝等)

  • 高性能。动画采用css3+硬件加速,在主流手机上流畅运行

  • 良好的兼容性。支持和各种Scroll的嵌套(包括mui-scroll,IScroll,Swipe等),支持Vue环境下的使用

  • 易拓展,三层架构,专门抽取UI层面,方便实现各种的主题,实现一套主题非常方便,而且几乎可以实现任何的效果

  • 优雅的API和源码,API设计科学,简单,源码严谨,所有源码通过ESlint检测

  • 完善的文档与示例,提供完善的showcase,以及文档(文档正在更新中...)

  • minirefreshonline = new MiniRefresh({         container: '#minirefreshonline',         down: {             isAuto: true,             isWrapCssTranslate: true,             // isAutoResetUpLoading: fals

 相关资料
  • 本文向大家介绍H5基于iScroll实现下拉刷新和上拉加载更多,包括了H5基于iScroll实现下拉刷新和上拉加载更多的使用技巧和注意事项,需要的朋友参考一下 前言       前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据而已,上拉是追加数据。 使用

  • 下拉刷新是一个特别的组件,可以用来初始化页面内容的刷新。 下拉刷新的demo <header class="bar bar-nav"> <h1 class='title'>下拉刷新</h1> </header> <!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 --> <div class="content pull-to-re

  • 下拉刷新是一个特别的组件,可以用来初始化页面内容的刷新。 下拉刷新的HTML布局结构 让我们来看一下如何把下拉刷新组件集成到页面中: <div class="page"> <!-- Page content应该拥有"pull-to-refresh-content"类 --> <div class="page-content pull-to-refresh-content" data-ptr

  • Page.onPullDownRefresh() 在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件 jd.startPullDownRefresh(Object object) 开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致 OBJECT 参数说明: 参数 类型 必填 说明 success Function 否 接口调用成功的回调函数

  • 主要内容:实例在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: 实例 HTML 代码 JavaScript 代码 item.json 文件数据: 尝试一下 » 效果如下所示:

  • 介绍 用于提供下拉刷新的交互操作。 引入 import { createApp } from 'vue'; import { PullRefresh } from 'vant'; const app = createApp(); app.use(PullRefresh); 代码演示 基础用法 下拉刷新时会触发 refresh 事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将 v-m

  • 在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: 实例 HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <ion-refresher pulling-text="下拉刷新" on-refresh="doRefr

  • !!! 暂未完善在 PC 端模拟 touch 事件的功能 下拉刷新组件。基本等同于 Fetch 组件,默认关闭了滚动加载功能,更多内容参见:Fetch API。