better-scroll 介绍
碰到一个项目,应该遵守两大规则:
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{
}
</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 介绍的更多相关文章
- moviepy音视频剪辑:视频变换处理与内容相关的变换函数headblur、mask_and/or、mirror_x/y、rotate、painting、scroll介绍
一.引言 在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>介绍了剪辑基类的fl.fl_time.fx方法,在<moviepy音视频剪辑:视频剪辑基类VideoC ...
- Python音视频剪辑库MoviePy1.0.3中文教程导览及可执行工具下载
☞ ░ 前往老猿Python博文目录 ░ 一.简介 MoviePy是一个用于视频编辑的Python模块,可用于进行视频的基本操作(如剪切.拼接.标题插入).视频合成(也称非线性编辑).视频处理或创建高 ...
- 老猿Python博文汇总目录--按标题排序
☞ ░ 前往老猿Python博文目录 ░ 本部分为老猿CSDN全部博文的汇总(含转载部分),所有文章在此未进行归类,仅按文章标题排序,方便关键字查找.本部分内容将至少以周为单位定期更新,可能不包含发布 ...
- PyQt+moviepy音视频剪辑实战文章目录
☞ ░ 前往老猿Python博文目录 ░ 本专栏为moviepy音视频剪辑合成相关内容介绍的免费专栏,对应的收费专栏为<moviepy音视频开发专栏>. 一.moviepy基础能力系统介绍 ...
- [转] jQuery Infinite Ajax Scroll(ias) 分页插件介绍
原文链接:http://justflyhigh.com/index.php/articlec/index/index.php?s=content&m=aticle&id=91 Infi ...
- 一张图介绍 html中offset、client、scroll、offset 、padding、margin 各种属性介绍
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- HTML 事件(一) 事件的介绍
本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...
- MUI开发APP,scroll组件,运用到区域滚动
最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...
随机推荐
- vue-cli3.x创建项目vue create hello-world
在git中输入指令vue create hello-world,没反应,因为vue-cli的版本问题,必须3.x版本才能使用这个指令于是按照官网的提示升级vue vue-cli从2.x版本升级到3.x ...
- 从一道Hard学习滑动窗口
滑动窗口 滑动窗口(sliding windows algorithm)这种方法,专门用于解决区间解的问题.它在运算的时候,将解集放在窗口中,结束的时候比对是否符合预期.在运算的过程中,会对窗口的左右 ...
- 07-【jsp基本了解】
jsp 动态网页技术:服务器和用户交互的动态网页技术jsp[java server page ]jsp ≍ html +servletjsp 文件是以 *.jsp结尾:jsp文件 靠服务器运行,jsp ...
- PHP-MYSQL中文乱码问题.
从MySQL 4.1开始引入多语言的支持,但是用PHP插入的中文会出现乱码.无论用什么编码也不行. 解决这个问题其实很简单. 1.在建表的时候设置编码类型为gb2312_chinese_ci. 2.在 ...
- Zabbix Server安装指南
监控模板网站 在https://share.zabbix.com/,提供了各种各样的监控模板,可以自行搜索,套用.
- Kafka、RabbitMQ、RocketMQ等 消息中间件 介绍和对比
文章目录 1.前言 2.概念 2.1.MQ简介 2.2.MQ特点 2.2.1.先进先出 2.2.2.发布订阅 2.2.3.持久化 2.2.4.分布式 3.消息中间件性能究竟哪家强? 3.1.Kafka ...
- elasticsearch启动时遇到的错误
elasticsearch启动时遇到的错误 问题翻译过来就是:elasticsearch用户拥有的内存权限太小,至少需要262144: 解决: 切换到root用户 执行命令: sysctl -w vm ...
- 【模板】多标记 LCT
代码如下 #include <bits/stdc++.h> using namespace std; typedef long long LL; const int mod = 51061 ...
- tomcat不能处理图形
https://blog.csdn.net/yfx000/article/details/86591945 不让java寻找linux图形界面即可,在java启动时加选项java -Djava.awt ...
- k8s认证与授权
认证用于身份鉴别,而授权则实现权限分派.k8s以插件化的方式实现了这两种功能,且分别存在多种可用的插件.另外,它还支持准入控制机制,用于补充授权机制以实现更精细的访问控制功能. 一.访问控制概述 ap ...