上拉刷新简版

小鱼儿 2023-10-09 12:42 33阅读 0赞

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

\#box\{

width: 300px;

height: 500px;

border:1px solid red;

overflow: hidden;

\}

\#box div\{

width: 100%;

height: 800px;

background: \#999;

\}

</style>

</head>

<body>

<div id="box">

<div>

这是一个better-scroll demo

</div>

</div>

</body>

</html>

<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>

<script>

var warpper = document.getElementById('box')

var Scroll = new BScroll(warpper, \{

probeType: 2,

bounceTime:700, //回弹时间

pullUpLoad: \{

threshold: 10 //当上拉距离超过盒子高度的10px的时候,就派发一个上拉加载的事件

\},

pullDownRefresh:\{

threshold: -10 //当下拉长度距离盒子顶部的高度超过10px的时候,就派发一个下拉刷新的事件

\},

useTransition:false // 防止iphone微信滑动卡顿

\});

Scroll.on("pullingUp",function()\{ //上拉加载事件

console.log('加载ajax数据');

Scroll.finishPullUp();//可以多次执行上拉加载，没有这段代码上拉只会加载一次

\});

Scroll.on("pullingDown",function()\{ //下拉刷新事件

console.log('下拉刷新数据');

Scroll.finishPullDown()//可以多次执行下拉刷新，没有这段代码下只会刷新一次

\});

Scroll.refresh();//初始化demo 当异步加载数据的时候，重新渲染页面，这段代码非常重要

</script>

转载于:https://www.cnblogs.com/wsj1/p/11486423.html

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关上拉刷新简版

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v

小鱼儿/ 2023年10月09日 12:42/ 0 赞/ 34 阅读

相关 MUI-上拉刷新和下拉刷新

上（下）拉刷新代码一 <script type="text/javascript"> mui.init({ pullRefre

浅浅的花香味﹌/ 2023年09月29日 11:53/ 0 赞/ 13 阅读

相关上拉加载下拉刷新

老方法，先上效果图： ![1264306-20190925171702811-981213350.gif][] 1.加入下拉刷新上拉加载的依赖 1 //下拉刷新

一时失言乱红尘/ 2023年08月17日 17:09/ 0 赞/ 128 阅读

相关原生js下拉刷新和上拉刷新

参考来源：[https://www.cnblogs.com/panyujun/p/11972872.html][https_www.cnblogs.com_panyujun_p

古城微笑少年丶/ 2022年12月05日 15:25/ 0 赞/ 160 阅读

相关下拉刷新上拉加载

下拉刷新： ![Center][] ![Center 1][] ![Center 2][] 上划加载 ![Center 3][] ![C

约定不等于承诺〃/ 2022年07月17日 02:22/ 0 赞/ 345 阅读

相关上拉刷新

本文的上拉刷新需要用到 paginglistview 这个框架 public class MainActivity extends AppCompatActivity

我不是女神ヾ/ 2022年07月15日 02:52/ 0 赞/ 152 阅读

相关 iscroll 上拉刷新极简入门案例

iscroll 上拉刷新极简入门案例注意:只有当内容超出屏幕区域才可以上拉刷新呢 ![这里写图片描述][iscroll2.png] 演示 ![这里写图片

桃扇骨/ 2022年06月06日 02:43/ 0 赞/ 143 阅读

相关 JavaScript 下拉/上拉刷新

![在这里插入图片描述][20181218084100184.gif] <!DOCTYPE html> <html lang="zh-cn"> <h

太过爱你忘了你带给我的痛/ 2022年04月04日 14:16/ 0 赞/ 254 阅读

相关 uni-app 上拉刷新

1.引入uni-app中uni-load-more.vue ，可按alt键点击引入的vue 查看使用的上拉刷新的代码 import uniLoadMore from

深藏阁楼爱情的钟/ 2021年12月04日 08:33/ 0 赞/ 561 阅读

相关 mui下拉/上拉刷新

很久之前写的demo找了出来，不是很完善，单纯的记录一下，以后再用到了再改。 <!DOCTYPE HTML> <html> <head> <s

你的名字/ 2021年09月28日 06:46/ 0 赞/ 408 阅读