mobile-pull-to-refresh: 移动端下拉刷新控件

developerworks 发布于2019-08-20 14:30 / 3145人阅读

摘要：移动端下拉刷新控件体积小无依赖预览请在手机版中查看或打开版的手机模拟器样式样式样式如何使用安装引入和代码请查看例子中的文件调用许可友情鸣谢

</>复制代码 
Github: https://github.com/fenivana/p...

Pull to refresh

移动端下拉刷新控件. 体积小无依赖.

预览

请在手机版Chrome, Safari中查看, 或打开PC版Chrome DevTools的手机模拟器.

Material样式

Material样式2

iOS样式

如何使用 安装

</>复制代码 
npm install mobile-pull-to-refresh --save

引入JS和CSS (webpack 2)

</>复制代码 
import pullToRefresh from "mobile-pull-to-refresh"
// Import the style you want
// Material
import ptrAnimatesMaterial from "mobile-pull-to-refresh/dist/styles/material/animates"
import "mobile-pull-to-refresh/dist/styles/material/style.css"
// Material 2
import ptrAnimatesMaterial2 from "mobile-pull-to-refresh/dist/styles/material2/animates"
import "mobile-pull-to-refresh/dist/styles/material2/style.css"
// iOS
import ptrAnimatesIos from "mobile-pull-to-refresh/dist/styles/ios/animates"
import "mobile-pull-to-refresh/dist/styles/ios/style.css"

HTML代码

请查看例子中的HTMl文件.

Material style

Material style 2

iOS style

调用

</>复制代码 
pullToRefresh({
  container: document.querySelector(".container"),
  animates: ptrAnimatesMaterial,
  // animates: ptrAnimatesMaterial2,
  // animates: ptrAnimatesIos,
  refresh() {
    return new Promise(resolve => {
      // here to fetch the data and rerender the contents.
      setTimeout(resolve, 2000)
    })
  }
})

许可

MIT

友情鸣谢

Material spinner by jczimm

iOS spinner by Jianqiu Xiao

Icons by Google

Some css code from Muse UI

云服务器 GPU云服务器下拉刷新控件 js移动端向上滚动刷新数据移动端html5控件下拉刷新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81687.html

mobile-pull-to-refresh: 移动端下拉刷新控件

摘要：移动端下拉刷新控件体积小无依赖预览请在手机版中查看或打开版的手机模拟器样式样式样式如何使用安装引入和代码请查看例子中的文件调用许可友情鸣谢 Github: https://github.com/fenivana/p... Pull to refresh 移动端下拉刷新控件. 体积小无依赖. 预览请在手机版Chrome, Safari中查看, 或打开PC版Chrome DevTools...

ispring 2019-08-30 15:52 评论0 收藏0
好快, 1分钟开发好一个下拉刷新,滚动加载列表

摘要：但本活又己交给音长争标识我。八说前它特用达圆是路看江才。开次他争从点军容给油很出。成育料技所心并精北酸间办元。除现七团一历积动两水矿花始线党党她。好快, 1分钟写好下拉刷新,滚动加载自动分页列表前言欢迎关注BUI Webapp专栏或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架微信Webapp开发的各种变态路由需求及解决办法! ...

wemall 2019-08-30 15:56 评论0 收藏0
好快, 1分钟开发好一个下拉刷新,滚动加载列表

摘要：但本活又己交给音长争标识我。八说前它特用达圆是路看江才。开次他争从点军容给油很出。成育料技所心并精北酸间办元。除现七团一历积动两水矿花始线党党她。好快, 1分钟写好下拉刷新,滚动加载自动分页列表前言欢迎关注BUI Webapp专栏或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架微信Webapp开发的各种变态路由需求及解决办法! ...

468122151 2019-08-30 15:44 评论0 收藏0
Android智能下拉刷新框架-SmartRefreshLayout

摘要：框架下拉刷新控件还能框架化智能又怎么回事二话不多少先上效果图，咱们再来探个究竟。下面通过自定义和嵌套作为内容来解释的智能之处。可以看到在列表已经滚动到中部时，轻微下拉列表是不会触发刷新的，但是如果是触摸固定的布局，则可以触发下拉。框架？下拉刷新控件还能框架化？智能又怎么回事？二话不多少先上Demo效果图，咱们再来探个究竟。 Github 传送门注意：本文仅仅是博客文章，主要用于项目介...

MadPecker 2019-08-15 10:42 评论0 收藏0