滚动原理:
.content是一个元素,不能是多个元素组成 .wrapper高度要小于.content
安装和使用
vue中
安装: 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>
script 引入better-scroll
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< style>
.wrapper {
height : 200px;
background-color : red;
overflow : hidden;
}
</ style>
</ head>
< body>
< div class = " 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>
< script src = " 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.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>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< style>
.wrapper {
height : 200px;
background-color : red;
overflow : hidden;
}
</ style>
</ head>
< body>
< div class = " 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>
< script src = " 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>
click
用法: const scroll = new BScroll(document.querySelector('.wrapper'),{
click:true
})
最先的better-scroll上拉加载更多 使用的是一个插件
better-scroll插件文档
这个只是实现一个简单的滚动不包含所有插件,因此无法实现上拉加载更多
< script src = " https://unpkg.com/@better-scroll/core@latest/dist/core.js" > </ script>
< script src = " https://unpkg.com/better-scroll@latest/dist/better-scroll.js" > </ script>
let wrapper = document.getElementById("wrapper")
let bs = BetterScroll.createBScroll(wrapper, {})
引入 <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() })
- scroll.finishPullUp()表示每次上拉的时候都触发上拉加载 - 如果不设置 scroll.finishPullUp() 则只能上拉加载一次
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< style>
.wrapper {
height : 200px;
background-color : red;
overflow : hidden;
}
</ style>
</ head>
< body>
< div class = " wrapper" >
< ul class = " content" >
< button class = " btn" > 按钮</ button>
< 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>
< script src = " 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 )
} ,
}