better-scroll实现下拉刷新、上拉加载更多(巨简单...)
来源:互联网 发布:哪里胡杨林最美 知乎 编辑:程序博客网 时间:2024/06/01 19:26
1、废话少说,先看看移动端的列表页面
(1)正常浏览
(2)下拉刷新中
(3)下拉刷新结束
(4) 上拉加载
(5)上拉 加载中
2、上述基本上就是一整套移动端列表的刷新过程,采用better-scroll实现,其github地址可参考 https://github.com/ustbhuangyi/better-scroll
3、网上也有一些基本使用教程,这里就不一一累赘,下面主要说一些注意事项
(1)html定义中的注意事项
new window.BScroll时候传入的DOM对象中,除了ul列表,还包括和ul列表平级的其他div(如:下拉提示信息),ul和其平级的div最外层一定还要要用另一 个div包裹,
(ps:因为bscroll的原理是给new window.BScroll传入的DOM对象的第一级子级加上transition动画等),实例如下:蓝色箭头是new Bsroll传入的对象
(2)js中的注意事项
场景:如果想在上拉或者下拉请求数据成功后,给出一个提示信息,并且该提示信息的html是通过js动态添加的,,添加为body的第一级子级,上拉、下拉就会失效
解决方法,可预先定义DOM元素,先隐藏,请求成功后再控制该DOM元素的显示,实例如下图
4、如果想查看demo,小伙伴们可去github下载哦:
https://github.com/chuanzaizai/scroll-demo
1 1
- better-scroll实现下拉刷新、上拉加载更多(巨简单...)
- 微信小程序开发(十四)scroll-view实现下拉刷新上拉加载更多
- 为Recycler添加下拉刷新,上拉加载更多功能(简单实现)
- scroll实现上拉加载,下拉刷新,轮播图效果
- better-scroll上拉加载 和下拉刷新 的使用(基于vue写成组件的形式)
- 下拉刷新和上拉加载更多实现方法
- Android ListView下拉刷新上拉加载更多的实现
- ListView下拉刷新上拉加载更多实现
- Android 下拉刷新 上拉加载更多框架实现
- android实现下拉刷新上拉加载更多理解
- listview下拉刷新,上拉加载更多的实现方法
- SwipeRefreshLayout实现下拉刷新、上拉加载更多功能
- ionic 实现下拉刷新上拉加载更多
- Android中RecyclerView实现下拉刷新上拉加载更多
- 自定义ListView实现下拉刷新,上拉加载更多
- MaterialRefreshLayout实现下拉刷新上拉加载更多
- PullToRefreshListView实现下拉刷新和上拉加载更多
- RecyclerView实现下拉刷新上拉加载更多
- ui-sref传递参数报错原因解析
- 写了一个小工程——总结
- QT写一个记事本⑤
- 我这样解决MySQL Server Instance Configuration Wizard无响应
- Win10锁屏壁纸怎么提取保存到本地
- better-scroll实现下拉刷新、上拉加载更多(巨简单...)
- JSP —— 使用referer 请求头防止表单从外部提交,防止从外部登录网站
- HDU 3416 Marriage Match IV(最短路+最大流)
- 实验6 makefile文件
- DHCP数据包捕获
- 排序11:小范围排序
- nyoj138 找球号(二) (hash表+二分)
- 178_08_IO流_流概述_画图分析流的本质_重点掌握的流
- JavaScript学习笔记29-其他的创建数组的方法