在html中dom全部渲染完毕后,调用this.personScroll()方法,该方法首先为ul父元素的宽度动态赋值; 接着定义滚动区域对象,设置相关的属性即可。 尾声 通过better-scroll我们能轻松的实现横向滚动或者纵向滚动,然而知道怎么用其实并没有什么乱用, 我们需要明白的是其原理,最后的最后请各位看官移步到better-scroll库设计者...
只要给wrapper一个高度,当滚动内容的高度大于wrapper高度时就会发生滚动。 横向滚动: 但是在横向滚动时,html中块级元素的宽度度默认是其父元素的100%,所以content的默认宽度就是wrapper的宽度,滚动区域宽度等于包裹体的宽度,就不会发生横向滚动了,解决方案是将content的宽度设为其子元素的宽度。 将块级元素的宽度设置...
better-scroll横向滚动、纵向滚动 1 2 3 4 5 6 7 8 <!-- {{ item.title }} --> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
浏览器的滚动条大家都会遇到,当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。 那么对于 better-scroll 也是一样的道理,我们先来看一下 better-scroll 常见的 htm...
最近在学习vue的过程中,仿照去哪儿网的移动端写了个小项目,旨在实践和巩固基础知识,但是今天发现去哪儿的首页上有一个组件用户体验较差,即一个横向列表使用浏览器的原生滚动实现,列表滚动起来较为生涩,很难受,于是乎决定由better-scroll重写这个组件。 better-scroll介绍 ...
scroll.refresh(); } }); }, //新建滚动实例 并监听竖轴滚动的高度 _initScroll() { this.wrapperScroll = new BScroll(this.$refs.wrapper, { click: true, //better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true,better-scroll 会派发一个 click 事件,我们会给派发的 event 参数加一个...
newVue({el:'#app',mounted(){this.fetchData(1);},methods:{// 伪代码,请求接口的发方法fetchData(){// 请求数据成功后,调用setScrollthis.setScroll();}// 设置tab横向滚动setScroll(){// 这边的channelList为请求接口后返回的数据let width=(this.channelList.length+1)*72// 动态计算出滚动区域的大...
vue中的better-scroll横向滚动案例 1.安装 better-scroll 托管在 Npm 上,执行如下命令安装: npm install better-scroll --save; 1. 2.引入 import BScroll from 'better-scroll' 如果是ES5语法 var BScroll = require('better-scroll')...
onScroll(){ this.$nextTick(()=>{ if (!this.scroll) { this.scroll=new BScroll(this.$refs.tab, { startX:0, click:true, scrollX:true, scrollY:false, }) }else{ this.scroll.refresh() } }) } }, mounted () { this.onScroll() } .tab{ width: 7.54rem;height: 0.88rem;backgrou...
一、滚动的实现原理 better-scroll的滚动原理和浏览器原生滚动原理是一样的,当子盒子的高度大于父盒子的高度,就会出现纵向滚动: 同理,如果子盒子的宽度大于父盒子的宽度,那么就会出现横向滚动 ( 根本原理 )。 二、在Vue中使用better-scroll 在Vue中使用better-scroll最需要注意的点就是必须等到页面渲染完成再去执行...