better-scroll实现滚动效果

滚动原理
在浏览器中的滚动中，当内容的高度高于外边容器的高度的时候也就出现了滚动条，我们可以通过使用滚动条来看到超出的部分.

better-scroll的原理正是基于这里，内容部分的宽度/高度必须大于外部宽度/高度
注意：滚动的元素只能是第一个容器的第一个元素。
废话不多说，上代码

 singersMsg:[{idx:1,con:'你好',},{idx:2,con:'你好',},{idx:3,con:'你好',},{idx:4,con:'你好',},{idx:5,con:'你好',},{idx:6,con:'你好',},{idx:7,con:'你好',},{idx:8,con:'你好',},{idx:9,con:'你好',},{idx:10,con:'你好',},],

<div class="wrapper" ref="scroll" @mousewheel="onScroll"><div class="contentList"><div class="content" v-for="(item,index) in singerList":key="index" ><span>{{item.con}}</span></div></div>
</div>

.wrapper{height: 597px;width: 980px;overflow:hidden;   // 父元素必须固定宽（左右滚动）或者必须高（上下滚动），超出隐藏。
}
.contentList{width: 980px;  // 子元素只固定宽（上下滚动），或者只固定高（左右滚动），
}
.content{width: 176px;height: 176px;
}

安装betterscroll
npm install @better-scroll/core（@better-scroll/pull-up，，，@better-scroll/mouse-wheel，，，@better-scroll/scroll-bar，，，@better-scroll/observe-dom） --save
// or
yarn add @better-scroll/core（@better-scroll/pull-up，，，@better-scroll/mouse-wheel，，，@better-scroll/scroll-bar，，，@better-scroll/observe-dom）

import BScroll from '@better-scroll/core'  //引入（必须）
import Pullup from '@better-scroll/pull-up'
import MouseWheel from '@better-scroll/mouse-wheel'   //安装并设置为true，即可使用鼠标滚动
import ScrollBar from '@better-scroll/scroll-bar'   //安装并设置为true，即可显示滚动条
import ObserveDOM from '@better-scroll/observe-dom'  // 安装并设置为true，即可实现tab切换自动刷新
BScroll.use(Pullup)
BScroll.use(MouseWheel)
BScroll.use(ScrollBar)
BScroll.use(ObserveDOM)
methods: {onScroll(){this.$nextTick(() => {this.scroll = new BScroll(this.$refs.scroll, {//配置项// pullUpLoad:true, mouseWheel: true,disableTouch:false,disableMouse:false,scrollbar: true,  是否显示滚动条observeDOM: true,preventDefault:false   //是否阻止浏览器默认行为，（比如浏览器默认鼠标可以选中文字复制）})// apithis.scroll.on('scrollEnd', () => {     //scrollEnd鼠标滑到底部if(this.scroll.y<=this.scroll.maxScrollY){console.log("滑到底部了！")}  })})},}

betterscroll官网地址在这里：https://better-scroll.github.io/docs/zh-CN/guide/

better-scroll实现滚动效果相关推荐

列表找房（十）03-页面滚动效果控制——WindowScroller组件用法 Scroll属性
页面滚动效果控制--WindowScroller组件用法 & Scroll属性需求:让List列表的滚动随着window窗口的滚动而滚动 WindowScroller组件用法官网:http ...
One Page Scroll – 实现苹果风格的单页滚动效果
单页滚动网站已经被广泛使用了有一段时间了,它们对于快速提供信息是很有用的.One Page Scroll 是一个 jQuery 插件,简化了创建此类网站的步骤,只需创建 HTML 结构,进行简单设置, ...
包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码: 在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如 ...
html制作滚动游戏,HTML标签marquee实现滚动效果的简单方法(必看)
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - 可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语 ...
JavaScript字幕滚动效果
其中要注意的:overflow:hidden,否则会全部显示,达不到效果. 使用时可以对ul.scrollTop >= 195这一句的数字进行设置.达到平滑过渡的作用. <!DOCTYPE ...
隐藏滚动条，保留鼠标滚动效果
原作者地址:https://blog.csdn.net/liusaint1992/article/details/51277751 当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是 ...
页面实现文字滚动效果(跑马灯)
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用ma ...
推荐六款帮助你实现惊艳视差滚动效果的 jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Pa ...
页面滚动时触发图片逐帧播放_如何在滚动效果上创建逐帧运动图像
页面滚动时触发图片逐帧播放 A step by step guide on how to create that dynamic image background you see everywhere ...

better-scroll实现滚动效果

better-scroll实现滚动效果相关推荐

最新文章

热门文章