.content是一个元素，不能是多个元素组成 .wrapper高度要小于.content 安装： npm install better-scroll --save 使用：
导入 import BScroll from 'better-scroll' 创建 new BScroll(this.$refs.wrapper, {}) 创建html元素 .wrapper和.content .wrapper高度要小于.content
.wrapper{ background-color:red; height: 300px; overflow: hidden; } < template>
< div class = "wrapper" ref= "wrapper" >
< ul class = "content" >
< li> 列表1 < / li>
< li> 列表2 < / li>
< li> 列表3 < / li>
< li> 列表4 < / li>
< li> 列表5 < / li>
< li> 列表6 < / li>
< li> 列表7 < / li>
< li> 列表8 < / li>
< li> 列表9 < / li>
< li> 列表10 < / li>
< li> 列表11 < / li>
< li> 列表12 < / li>
< li> 列表13 < / li>
< li> 列表14 < / li>
< li> 列表15 < / li>
< li> 列表16 < / li>
< li> 列表17 < / li>
< li> 列表18 < / li>
< li> 列表19 < / li>
< li> 列表20 < / li>
< li> 列表21 < / li>
< li> 列表22 < / li>
< li> 列表23 < / li>
< li> 列表24 < / li>
< li> 列表25 < / li>
< li> 列表26 < / li>
< li> 列表27 < / li>
< li> 列表28 < / li>
< li> 列表29 < / li>
< li> 列表30 < / li>
< li> 列表31 < / li>
< li> 列表32 < / li>
< li> 列表33 < / li>
< li> 列表34 < / li>
< li> 列表35 < / li>
< li> 列表36 < / li>
< li> 列表37 < / li>
< li> 列表38 < / li>
< li> 列表39 < / li>
< li> 列表40 < / li>
< li> 列表41 < / li>
< li> 列表42 < / li>
< li> 列表43 < / li>
< li> 列表44 < / li>
< li> 列表45 < / li>
< li> 列表46 < / li>
< li> 列表47 < / li>
< li> 列表48 < / li>
< li> 列表49 < / li>
< li> 列表50 < / li>
< / ul>
< / div>
< / template>
< script>
import BScroll from 'better-scroll'
export default {
mounted ( ) {
this . $nextTick ( ( ) => {
this . scroll = new BScroll ( this . $refs. wrapper, { } )
} )
}
}
< / script>
< style scoped>
. wrapper{
background- color: red;
height: 300 px;
overflow: hidden;
}
< / style>
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
.wrapper {
height : 200px;
background-color : red;
overflow : hidden;
}
</ style> </ head> < body> < divclass = " wrapper" > < ulclass = " content" > < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> </ div> < scriptsrc = " https://unpkg.com/@better-scroll/core@latest/dist/core.js" > </ script> < script>
const scroll = new BScroll ( document. querySelector ( '.wrapper' ) , {
} )
</ script> </ body> </ html> 监听方法 scroll.on(事件名称，回调函数)
// 监听滚动
scroll.on('scroll',(position) => {
console.log(position);
})
1. probeType：侦测
0,1 表示不侦测实时的位置
2 在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测
3 只要是滚动，都侦测
2. 监听滚动
scroll.on('scroll',(position) => {
console.log(position);
})
3. 设置probeType的值
const scroll = new BScroll(document.querySelector('.wrapper'),{
probeType:3
})
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
.wrapper {
height : 200px;
background-color : red;
overflow : hidden;
}
</ style> </ head> < body> < divclass = " wrapper" > < ulclass = " content" > < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> </ div> < scriptsrc = " https://unpkg.com/@better-scroll/core@latest/dist/core.js" > </ script> < script>
const scroll = new BScroll ( document. querySelector ( '.wrapper' ) , {
probeType: 3
} )
scroll. on ( 'scroll' , ( position) => {
console. log ( position) ;
} )
</ script> </ body> </ html> 用法： const scroll = new BScroll(document.querySelector('.wrapper'),{
click:true
})
better-scroll插件文档
这个只是实现一个简单的滚动不包含所有插件，因此无法实现上拉加载更多 < scriptsrc = " https://unpkg.com/@better-scroll/core@latest/dist/core.js" > </ script> < scriptsrc = " https://unpkg.com/better-scroll@latest/dist/better-scroll.js" > </ script> 引入 <script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script> 创建 const scroll = BetterScroll.createBScroll(document.querySelector('.wrapper'),{ pullUpLoad: true, }) 监听上拉加载 scroll.on('pullingUp',() => { console.log(123); scroll.finishPullUp() }) <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
.wrapper {
height : 200px;
background-color : red;
overflow : hidden;
}
</ style> </ head> < body> < divclass = " wrapper" > < ulclass = " content" > < buttonclass = " btn" > </ button> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> </ div> < scriptsrc = " https://unpkg.com/better-scroll@latest/dist/better-scroll.js" > </ script> < script>
const scroll = BetterScroll. createBScroll ( document. querySelector ( '.wrapper' ) , {
pullUpLoad: true ,
} )
scroll. on ( 'pullingUp' , ( ) => {
console. log ( 123 ) ;
} )
</ script> </ body> </ html> this.scroll.scrollTo(x,y,time)
x x轴的距离 y y轴的距离 time 到达x，y位置需要多长时间 import BScroll from 'better-scroll'
export default {
data ( ) {
return {
scroll: null
}
} ,
mounted ( ) {
this . scroll = new BScroll ( this . $refs. wrapper, {
observeDOM: true ,
click: true
} )
this . scroll. scrollTo ( 0 , 0 , 300 )
} ,
}
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
