碰到一个项目,应该遵守两大规则:

    1. 不要让项目产生过多的第三方依赖

    2. 增强组件的应用率

  尽可能的将东西写在组件里面,尽可能的将数据写活,通过组件通信来进行数据转换,用到的依赖处理,我们可以通过先处理,在让项目中的文件,来依赖我们的处理的文件,这样我们只需要改处理的文件即可,将数据写活,尽可能的少写代码,来思考,怎么做代码写的少,功能还能达到同样的效果,那么组件的处理显得特别重要

  Better-scroll 移动端的滚动插件 (注意:移动端,在 pc 端,效果可能出不来);

  Better-scroll 的插件,非常的人性化,操作简单,逻辑性强,功能强大(可以实现 滚动,上拉刷新,下拉刷新的效果,返回顶部,顶顶一系列的效果,且特适用于 vue )

  下载方式:npm 下载,官网下载;

    npm 下载:npm install better-scroll -S  // 这种方式是 1x 所以我们需要看 1x 文档

    官网下载:https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/installation.html

  引入方式:npm 中  import BScroll from 'better-scroll'

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

  当我们引入之后,我们中就会有一个 BScroll 的类

  css 的结构 外层的布局方式

  <style>

    .wrapper{

      position:absolute;
      top:40px;
      bottom:50px;
      width:100%;
      overflow-y:scroll;

    }

  </style>

  html 的结构:只能这个用

  <div class="wrapper">

    <div class="content">

      在这个里面我们来写东西

    </div>

  </div>

  js 语法 (因为是 普通的页面,所以要操作 dom )

  详情请看 better-scroll 1x 的文档:https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options-advanced.html

  var wrapper = document.querySelector(".wrapper");

  var bs = new BScroll(wrapper,{    // 当我们 new BScroll 的时候,页面中就会有他带来的好处了,当我们滑动的时候,就会感到特别平滑  ,第一个参数 则是我们的 wrapper 的类

                    // 第一个参数的固定的,第二个参数就可以改变,是 BScroll 的配置项

    这里面的配置项,如下图:

    

    

  })

  在这个 bs 的实例上面,拥有的超多的方法:我们可以在下面使用

  

  当然,这里面还用事件,因为他不允许我们操作原生的事件,甚至都将原生的事件限制了,但我们还是可以在配置项里面进行修改,来进行操作的

  

  事件上面的方法,有的时候也是,也别的扯淡,所以,它上面的事件通常都是配合着 方法定制 来使用

  

  当然了,我们的 bs 身上还是有许多属性来供我们使用,我们可以参考

  

  案例:上拉刷新 触发的事件

  

better-scroll 介绍的更多相关文章

  1. moviepy音视频剪辑:视频变换处理与内容相关的变换函数headblur、mask_and/or、mirror_x/y、rotate、painting、scroll介绍

    一.引言 在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>介绍了剪辑基类的fl.fl_time.fx方法,在<moviepy音视频剪辑:视频剪辑基类VideoC ...

  2. Python音视频剪辑库MoviePy1.0.3中文教程导览及可执行工具下载

    ☞ ░ 前往老猿Python博文目录 ░ 一.简介 MoviePy是一个用于视频编辑的Python模块,可用于进行视频的基本操作(如剪切.拼接.标题插入).视频合成(也称非线性编辑).视频处理或创建高 ...

  3. 老猿Python博文汇总目录--按标题排序

    ☞ ░ 前往老猿Python博文目录 ░ 本部分为老猿CSDN全部博文的汇总(含转载部分),所有文章在此未进行归类,仅按文章标题排序,方便关键字查找.本部分内容将至少以周为单位定期更新,可能不包含发布 ...

  4. PyQt+moviepy音视频剪辑实战文章目录

    ☞ ░ 前往老猿Python博文目录 ░ 本专栏为moviepy音视频剪辑合成相关内容介绍的免费专栏,对应的收费专栏为<moviepy音视频开发专栏>. 一.moviepy基础能力系统介绍 ...

  5. [转] jQuery Infinite Ajax Scroll(ias) 分页插件介绍

    原文链接:http://justflyhigh.com/index.php/articlec/index/index.php?s=content&m=aticle&id=91 Infi ...

  6. 一张图介绍 html中offset、client、scroll、offset 、padding、margin 各种属性介绍

  7. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  8. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  9. HTML 事件(一) 事件的介绍

    本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...

  10. MUI开发APP,scroll组件,运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

随机推荐

  1. var正在声明变量

    var正在声明变量也可以直接分配一个变量,而不在JS中声明它,但是这种变量在默认情况下是全局的.<!-/->是HTML中的注释,在JS中不起作用.它只是用来忽略无法识别脚本的浏览器的脚本内 ...

  2. vccode配合svn

    先安装插件 要实现版本对比.需要先安装svn服务端 vue插件 微信小程序插件

  3. WebApi 跨域解决方案 --CORS

    跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求. 比如说,我在Web网站A(www.a.com)中通过<img ...

  4. Delphi10.2.3利用THttpClient实现http异步下载

    随着Delphi 10.2.3的发布,随之带来更稳定.更完善的版本.今天借官方的例子,解读一下如何实现Http异步下载并显示下载进度. 使用的核心组件是THttpClient,首先建立一个THttpC ...

  5. linux基础—课堂随笔04_文件查找和压缩

    文件查找和压缩 文件查找 1.locate   这个命令是对其生成的数据库进行遍历(生成数据库的命令:updatedb),这一特性决定了用locate查找文件速度很快,但是locate命令只能对文件进 ...

  6. c++第四次作业:类的继承

    一.定义 类的继承:是从新的类从已有类那里得到已有的特性. 二.方式 1.公有继承:当类的继承方式为公有继承时,基类的公有成员和保护成员的访问属性在派生类中不变,而基类的私有成员不可直接访问. 例: ...

  7. Android基础相关面试问题-binder面试问题详解

    Linux内核的基础知识: 进程隔离/虚拟地址空间:在操作系统中为了保护某个进程互不干扰就设计了一个叫“进程隔离”的技术,防止进程A可以操作进程B的数据.而进程隔离技术用到了虚拟地址空间,进程A的虚拟 ...

  8. 201271050130-滕江南-《面向对象程序设计(java)》第十七周学习总结

    201271050130-滕江南-<面向对象程序设计(java)>第十七周学习总结 博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.c ...

  9. 第七章 路由 82 名称案例-使用keyup事件实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  10. .NET Core 3来了!如何使用DevExpress WPF创建.NET Core 3应用

    DevExpress广泛应用于ECM企业内容管理. 成本管控.进程监督.生产调度,在企业/政务信息化管理中占据一席重要之地.通过DevExpress WPF Controls,您能创建有着强大互动功能 ...