BetterScroll | 易学教程

Vue项目中使用better-scroll

阅读更多关于 Vue项目中使用better-scroll

当 better-scroll 遇见 Vue 在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了。以滴滴为例，可以是这样竖向滚动的列表，如图所示：也可以是横向滚动的导航栏，如图所示：可以打开“微信 —> 钱包—>滴滴出行”体验效果。我们在实现这类滚动功能的时候，会用到我写的第三方库，better-scroll。什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 better-scroll 的滚动原理不少同学可能用过 better-scroll，我收到反馈最多的问题是：我的 better-scroll 初始化了，但是没法滚动。不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理：浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的

关于better-scroll的使用注意事项

阅读更多关于关于better-scroll的使用注意事项

better-scroll的原理 1.什么是 better-scroll？ better-scroll 是一个移动端滚动的解决方案，它不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 2.better-scroll的滚动原理？先来看一下浏览器的滚动原理，浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的 html 结构：为了更加直观，我们再来看一张图：绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。那么，我们怎么初始化 better-scroll 呢，如果是上述 html 结构，那么初始化代码如下： import BScroll from 'better-scroll' let wrapper = document

移动端开发——关于局部区域滚动总结---实战系列

阅读更多关于移动端开发——关于局部区域滚动总结---实战系列

在移动端开发的时候经常会碰到区域滚动的需求，当然实现起来也是非常简单的，给需要滚动的元素定高然后添加一个 overflow-y:scorll 自然就可以滚动了，但是添加这个属性之后，使用chrome或者其他浏览器工具调试时是支正常的，但是到手机上时滚动效果就十分的奇怪，滚动会让人感觉有卡顿感。这个时候使用一个属性就可以解决这个问题。 -webkit-overflow-scrolling:touch ，这个属性会让滚动条产生回弹效果，让滚动没有那么生硬。在MDN上是这么定义这个属性的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。然而是不是设置了这个属性之后就万事大吉了呢？也不全是这样子的，其实这个属性也还是有一些坑的。偶尔会卡住或不能滑动比较常见的问题有：在safari上，使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动。在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug。通过动态添加内容撑开容器

手写上拉加载，下拉刷新（小demo）

阅读更多关于手写上拉加载，下拉刷新（小demo）

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 背景使用过很多下拉刷新，上拉加载的插件，虽然也知道一点原理，但似乎一直不太完全能理解它，闲来无事，手写一个，感受下，借鉴了better-scroll的源码，功能当然相差甚远，也只是个简易版的实现，大概就这意思。 <!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> html,body,ul,li,div,input{ padding: 0; margin: 0; } #header { background: red; } #input{ display: inline-block; width: 80%; height: 30px; } #submit { display: inline-block; width: 16%; height: 30px; } #article { position: relative;

Vue.js学习笔记2 - better-scroll滚动条

阅读更多关于 Vue.js学习笔记2 - better-scroll滚动条

better-scroll滚动条使用作者自制的better-scroll库，实现内容的滚动。先在package.json加上依赖： "better-scroll": "^0.1.7" 接着再npm install安装依赖。 import BScroll from 'better-scroll'; this.menuScroll = new BScroll(this.$refs.menuWrapper, { click: true }) 上面BScroll就是这个滚动条的类，第一个参数是一个需要内容物滚动的DOM对象，第二个参数是滚动条的选项Options，是以JSON类型承载的。然后我们就可以使用它来和DOM绑定了。值得注意的是，在BScroll中绑定的DOM叫this. $refs .menuWrapper，它所指向的是这个Vue页面中的所有的拥有 ref 属性的标签中名字为menuWrapper的那个，如下图。 <template> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> ... 接着就可以把 this._initScroll(); 这句代码加入到created()中： created() { this.classMap = ['decrease', 'discount',

教你如何在Angular中使用better-scroll插件

阅读更多关于教你如何在Angular中使用better-scroll插件

本文主要介绍了Angular中使用better-scroll插件的方法，小编觉得挺不错的，现在分享给大家。 better-scroll的使用由于需要在一个固定的的高度做无限滚动，本来css的overflow-y也可以完成的，奈何安卓不是很流畅，还很生硬，就是用了第三方库better-scroll，配合angular的ng-content。angular的ng-content和vue的插槽很像，里面一些不确定的内容可以通过ng-content投影进去。安装better-scroll 1: npm install better-scroll --save 2: 安装types npm install better-scroll @types/better-scroll --save 3：在angular-cli里面引入 listscroll组件的编写根据官方的文档可以看出，better-scroll对dom的结构是有要求的，最外层的wrapper那一层是需要固定高度的，里面那一层content是根据内容的高度来撑起的。 html部分： <div class="scroll" #scroll> <ng-content></ng-content> </div> ng-content就是要投影进来的内容 component.ts部分 1: import引入 BScroll 2