better-scroll上拉加载和下拉刷新的一个简单写法

最新推荐文章于 2024-04-01 18:00:40 发布
最新推荐文章于 2024-04-01 18:00:40 发布
阅读量399 收藏 1
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leixu1027/article/details/102719162
版权

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>better-scroll</title>
    <style>
        .wrap{width:200px;height:200px;overflow:hidden;border:1px solid #0a8ddf;}
        .wrap .content{width:100px;height:auto;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="content">
        <div class="b">1</div>
        <div class="b">2</div>
        <div class="b">3</div>
        <div class="b">4</div>
        <div class="b">5</div>
        <div class="b">6</div>
        <div class="b">7</div>
        <div class="b">8</div>
        <div class="b">9</div>
        <div class="b">1</div>
        <div class="b">2</div>
        <div class="b">3</div>
        <div class="b">4</div>
        <div class="b">5</div>
        <div class="b">6</div>
        <div class="b">7</div>
        <div class="b">8</div>
        <div class="b">9</div>
        <div class="b">1</div>
        <div class="b">2</div>
        <div class="b">3</div>
        <div class="b">4</div>
        <div class="b">5</div>
        <div class="b">6</div>
        <div class="b">7</div>
        <div class="b">8</div>
        <div class="b">9</div>
        <div class="b">1</div>
        <div class="b">2</div>
        <div class="b">3</div>
        <div class="b">4</div>
        <div class="b">5</div>
        <div class="b">6</div>
        <div class="b">7</div>
        <div class="b">8</div>
        <div class="b">9</div>
        <div class="b">1</div>
        <div class="b">2</div>
        <div class="b">3</div>
        <div class="b">4</div>
        <div class="b">5</div>
        <div class="b">6</div>
        <div class="b">7</div>
        <div class="b">8</div>
        <div class="b">9</div>
        <div class="b">1</div>
        <div class="b">2</div>
        <div class="b">3</div>
        <div class="b">4</div>
        <div class="b">5</div>
        <div class="b">6</div>
        <div class="b">7</div>
        <div class="b">8</div>
        <div class="b">9</div>
    </div>
</div>
<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
<script>
    var oScroll = new BScroll(".wrap", {
        probeType: 2,
        //下拉刷新：可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
        //这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载
        pullUpLoad: {
            threshold: 10
        },
        pullDownRefresh: {
            threshold: 50,
            stop: 20
        },
        mouseWheel: {    // pc端同样能滑动
            speed: 20,
            invert: false
        },
        useTransition:false  // 防止iphone微信滑动卡顿
    });

    oScroll.on("pullingUp",function(){
        //alert('已到最底部');
        console.log('加载ajax数据上拉');
        oScroll.finishPullUp();//可以多次执行上拉刷新
    });

    oScroll.on("pullingDown",function(){
        //alert('已到最底部');
        console.log('加载ajax数据下拉');
        oScroll.finishPullDown();//可以多次执行上拉刷新
    });

    oScroll.refresh();
</script>
</body>
</html>

 

 

 

青天魔王
关注
专栏目录
上拉加载下拉刷新（better-scroll)
u013262823的博客
06-14 5638
前端实现一个上拉加载，下拉刷新，并且滑动一定的位置能够实现回到顶部的功能。这个在移动端上来说是一个很常见的功能。之前有看到有人用bette-scroll库来实现这个功能。 最基本的初始化代码如下： import BScroll from 'better-scroll' let wrapper = document.querySelector('.wrapper') let scroll = new...
better-scroll下拉刷新 上拉加载
Ammy的成长
11-13 405
安装 npm install better-scroll --save 初始化 <div class="wrapper"> <!-- better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。--> <ul class="content"> <li>...</l...
vue使用better-scroll实现下拉刷新、上拉加载
10-17
主要为大家详细介绍了vue使用better-scroll实现下拉刷新、上拉加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
better-scroll 上拉加载
老黑
01-08 2696
一、better-scroll 的上拉加载 首先需要一个使用了BS编写的列表（肯定是不能有BUG的） BS中文文档 this.actScroll = new BScroll(actBox, { tap: true, scrollbar: { fade: true }, pullUpLoad: { ...
better-scroll的上拉加载和下拉刷新
chunxue8373的博客
09-28 199
写一个better-scroll的上拉刷新，和下拉加载的小demo吧，小例子大用处，希望能够帮到有需要的小伙伴： 安装： 1.better-scroll 托管在 Npm 上，执行如下命令安装： npm install better-scroll --save 项目中引...
better-scroll之上拉加载
xuefeng11111的博客
01-17 1106
better-scroll的文档介绍的有点简单，去网上搜了一下才明白上拉加载的用法 参考博客https://blog.csdn.net/skyblacktoday/article/details/80534105#commentBox 主要实现代码如下 scrollInit () { const wrapper = document.querySelector('.wrapper') ...
better-scroll的使用(上拉加载更多)
weixin_43390711的博客
05-11 1802
1、安装、引入及使用文档 npm i better-scroll -S import BScroll from 'better-scroll' 使用文档 http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88 2、dom结构及样式： better-scroll作用在外层容器（.wrap）上，外层容器要给一个高度(如果.wrap的外层容器有高度，直接100
对better-scroll框架进行按需引入，进行封装
小啊dai
06-04 265
对better-scroll框架进行按需引入，进行封装 1、对所需框架进行引入 引入了核心滚动以及pull-up插件 npm install "@better-scroll/pull-up" --save npm install "import BSscroll from "@better-scroll/core" 2、对better-scroll进行封装（BetterScroll.vue） 3、对封装好的better-scroll进行使用（Home.vue） 4、在此基础上，对BetterScroll组
Vue-infinite-scroll在nuxt工程中使用
GeXueliu的博客
07-31 1117
vue-infinite-scroll在nuxt工程中使用 在plugins目录下新建vue-infinite-scroll.js import Vue from "vue"; import infiniteScroll from "vue-infinite-scroll" export default () => { Vue.use(infiniteScroll) } 在nuxt.config.js中添加如下内容 plugins:[ {src:"~plugins/
首次使用VUE搭建简单项目问题汇总
Zlantan的博客
07-01 261
* 以下内容为学习VUE全家桶时遇到的问题整理，学习中复现的网站为‘卖座电影’移动端，问题的顺序不是线性的，只是起思路整理和提醒的作用，许多具体问题还要配合文档观看。* 1. *跨域请求问题：* 跨域请求问题的解决方案主要有三种，JSONP、cors方法和服务代理（反向代理），目前JSONP使用较少，这里详细说一下cors方法和服务代理。 Cors方法：在服务端设置响应头”Access-Control-Allow-Origin:”这样所有人都可以向该服务器请求数据，通配符也可以替换成后端允许请求的域名。（当
mescroll上拉加载下拉刷新插件（附带demo）
08-10
可指定列表平滑滚动到任何位置。支持监听列表滚动事件,可一键滚动到列表顶部和底部,附带平滑缓冲效果。自动控制翻页。无需手动判断处理列表的页码,时间等变量等等
better-scoll实现上拉加载更多数据
weixin_38992765的博客
12-12 453
实现的需求 使用better-scroll下拉刷新 用mixin将列表请求进行封装 scroll.vue <template> <div ref="wrapper"> <div > <slot></slot> <!-- -> <div class="scrollBottom" v-if="pullup">{{showText[scrollText]}}</div&g
下拉刷新上拉加载（Better-scroll）
CIA的博客
11-10 465
介绍 ​ better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。better-scroll 是基于原生 JS 实现的，不依赖任何框架。 http://ustbhuangyi.github.io/better-scroll/doc/api
better-scroll库实现上拉加载下拉刷新
weixin_47392228的博客
11-30 463
实现上拉加载下拉下拉刷新
vue better-scroll插件完成上拉加载更多，2024前端大厂面试题来袭
最新发布
weixin_57485542的博客
04-01 139
npm install better-scroll -S松手刷新数据...{{item}}加载更多...
vue之better-scroll上拉加载，下拉刷新
热门推荐
mosowe
06-01 1万+
上拉加载pullUpLoad选项，用来配置上拉加载功能。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机this.scroll = new this.$BScroll(this.$refs.middleWrapper, { click: true, scrollY: true, ...
vue使用better-scroll实现下拉刷新和上拉加载，文末附文档
latinhui的博客
01-27 2153
这里写自定义目录标题背景逻辑展示部分逻辑部分小结代码HTMLJSCSS参考 背景 在使用VUE 开发APP过程中由于uniapp各项限制，决定弃用，直接使用VUE-CLI进行开发。其中遇到的一个问题就是上拉加载和下来刷新的问题，直接使用window.addEventListener scroll在移动端是无效的。后来采用了better-scroll库实现，但是在使用时发现在理解上有些问题导致期初使用有点疙瘩，这里梳理一下逻辑，最后附上代码。 逻辑 展示部分 其实better-scroll库的逻辑很简单，繁琐
better-scroll (下拉刷新、上拉加载)
weixin_30849591的博客
07-24 112
1. 下载 better-scroll npm install better-scroll --save 2. html 要符合以下条件 <div class="wrapper" ref="wrapper"> <ul class="content"> <li>...</li> <li&gt...
Vue.js移动端上拉加载与下拉刷新实战：兼容多屏与better-scroll升级
本篇文章详细讲解了如何...这篇文章提供了一个具体的实现策略，包括技术选型、关键配置参数设定以及针对屏幕适配的解决方案，对于想要在vue.js移动端app中实现上拉加载和下拉刷新功能的开发者来说，是一份实用的指南。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值