************better-scroll是基于父元素固定高度,溢出才滚动的,所以父元素务必定高,否则无法滚动*********************************************
*第一步引入
——————参考https://ustbhuangyi.github.io/better-scroll/#/examples/en
_____https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/property.html
——————CDN方式
https://unpkg.com/better-scroll/dist/bscroll.min.js
*第二步(记得加上dropDown变量)因为是基于touchEnd事件,所以不必需要scrollIndex(为了保证每次加载只执行一次数据的控制)
this.scroll = new BScroll('.addFriends',{
scrollY: true,
click: true
});
console.log(this.scroll.maxScrollY,'66');
this.scroll.on('scroll', (pos) => {
console.log(pos.y,this.dropDown)
//如果下拉超过50px 就显示下拉刷新的文字
if(pos.y>50){
this.dropDown = true
}else{
this.dropDown = false
}
})
//touchEnd(手指离开以后触发) 通过这个方法来监听下拉刷新
this.scroll.on('touchEnd', (pos) => {
// 下拉动作
if(pos.y > 50){
console.log("下拉刷新成功")
this.dropDown = false
}
//上拉加载 总高度>下拉的高度+10 触发加载更多
if(this.scroll.maxScrollY>pos.y+10){
console.log("加载更多");
// this.scrollIndex++;
// if(this.scrollIndex == 1){
this.loadNextPage();
// }
//使用refresh 方法 来更新scroll 解决无法滚动的问题
this.scroll.refresh()
}
console.log(this.scroll.maxScrollY+"总距离----下拉的距离"+pos.y)
})

better-scroll使用参考的更多相关文章

  1. html5手机常见问题与工具分享

    mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 ...

  2. 使用jQuery Mobile的注意事项(译)

    翻译编辑自:http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it 一.Android和IOS的内置键 ...

  3. mobileTech

    A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 工具类网站 HTML ...

  4. (任寒韬)WebApp群主 - MobileTech 资料

    web app : http://www.lightapp.cn/brand/index/4101 https://github.com/jtyjty99999/mobileTech/blob/mas ...

  5. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  6. 节流throttle和防抖debounce

    underscore.js提供了很多很有用的函数,今天想说说其中的两个.这两个函数都用于限制函数的执行. debounce 在解释这个函数前,我们先从一个例子看下这个函数的使用场景.假设我们网站有个搜 ...

  7. mobilehack -转

    # mobileHack##工具类网站 [HTML5 与 CSS3 技术应用评估](http://html5please.com/ "html5与css3技术应用评估") [各种奇 ...

  8. better-scroll的用法,及其中的一个属性event._constructed详解

    better-scroll是一个页面滚动插件,用它可以很方便的实现下拉刷新,锚点滚动等功能. 实现原理:父容器固定高度,并设置overflow:hidden,子元素超出父元素高度后将被隐藏,超出部分可 ...

  9. 事件的节流(throttle)与防抖(debounce)

    事件的节流(throttle)与防抖(debounce) 有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面.例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动 ...

  10. Chrome DevTools – 键盘和UI快捷键参考

    Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于 ...

随机推荐

  1. LibreOJ #10047

    应同机房某大佬的要求来写这篇题解 Description 给定一个字符串 \(S\) 和一个数 \(K\),要求求出 \(S\) 的所有形似 \(A+B+A\) 的子串数量,其中 \(\mid A\m ...

  2. 同时执行多个$.getJSON() 出现数据混乱的问题的解决

    $.getJSON() $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: d ...

  3. 不会开发的你也能管理好企业漏洞,开源免费工具:洞察(insight II)

    前言 公司刚开始建设安全管理时,都是从一片混沌开始的,资源总是不够的,我们每个做安全的人员,又要会渗透,又要抓制度,还得管理各种漏洞.在管理楼栋是,我相信大家都遇到过以下几个问题: 漏洞提交太多,自己 ...

  4. Prometheus自定义监控内容

    Prometheus自定义监控内容 一.io.micrometer的使用 1.1 Counter 1.2 Gauge 1.3 Timer 1.4 Summary 二.扩展 相关内容原文地址: 博客园: ...

  5. JavaScript——DOM操作

    DOM-(Document Object Model)即文档对象模型. JavaScript可以动态地修改DOM,从而来修改HTML的内容. 查找HTML元素 通过 id 找到 HTML 元素 通过标 ...

  6. Spark日志,及设置日志输出级别

    Spark日志,及设置日志输出级别 1.全局应用设置 2.局部应用设置日志输出级别 3.Spark log4j.properties配置详解与实例(摘录于铭霏的记事本) 文章内容来源: 作者:大葱拌豆 ...

  7. 图的广度优先遍历算法(BFS)

    在上一篇文章我们用java演示了图的数据结构以及图涉及到的深度优先遍历算法,本篇文章将继续演示图的广度优先遍历算法.广度优先遍历算法主要是采用了分层的思想进行数据搜索.其中也需要使用另外一种数据结构队 ...

  8. 翻译:《实用的Python编程》01_Introduction_00_Overview

    目录 | 下一节 (2 处理数据) 1. Python 简介 本章是第一章,将会从头开始介绍 Python 基础知识,让你从零开始,学会怎么编写.运行.调试一个简单的程序.最后,你可以运用这些 Pyt ...

  9. Web程序设计基础期末大作业——模仿QQ飞车手游S联赛官网编写的网页

    QQ飞车手游是我非常喜欢的游戏,也是我现在为数不多的常在玩的游戏,刚好我Web程序设计基础的大作业是要做一套网站,我就借此机会模仿飞车S联赛官网的页面自己做了一个网页,又加了一些自己的元素,由于我做这 ...

  10. 【算法】数据结构与算法基础总览(中)——刷Leetcode等算法题时一些很实用的jdk辅助方法锦集

    最近重新学习数据结构与算法以及刷leetcode算法题时,发现不少jdk自带的方法可以提升刷题的效率.这些小技巧不仅仅对刷算法题带来便利,对我们平时开发也是很有帮助的.本文以java语言为基础,记录了 ...