Vue中的Better-scroll
文章描述：
better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。
better-scroll是什么？
better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。
安装
安装带有所有插件的 BetterScroll
npm install better-scroll -S核心滚动，大部分情况可能只需要一个简单的滚动
npm install @better-scroll/coreimport BetterScroll from 'better-scroll'
let bs = new BetterScroll('.wrapper', {
movable: true,
zoom: true
})
import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {})滚动原理
浏览器的滚动原理： 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。
Vue中使用
template
<template>
<div class="">
<div class="wrapper" ref="wrapper">
<ul class="content">
<li v-for="(item,index) in 30">...</li>
</ul>
</div>
<ul>
<li v-for="(item,index) in 20">
666
</li>
</ul>
<Tabbar></Tabbar>
</div>
</template>script
probeType: 3, // 0,1,2,3 3就是只要在运行时就出发scroll事件
click: true, // 是否允许点击
pullUpLoad: true // 上啦加载更多，默认是false
import Tabbar from '../components/common/Tabbar.vue'
import BetterScroll from 'better-scroll'
export default{
name:"My",
components:{
Tabbar
},
data(){
return{
scroll:''
}
},
created() {
this.$nextTick(() => {
//this.scroll = new BetterScroll(this.$refs.wrapper)
this.scroll = new BetterScroll(this.$refs.wrapper, {
probeType: 3,
bounce: false,
click:true
})
})
}
}
style
.wrapper{
height: 400px;
overflow: hidden;
}
第二种
template
<template>
<div class="">
<section ref="wrapper">
<div>
<div v-for="(item,index) in 40">
{{item}}
</div>
</div>
</section>
</div>
</template>script
import BetterScroll from 'better-scroll'
export default{
name:"My",
components:{
},
data(){
return{
scroll:''
}
},
created() {
this.$nextTick(() => {
this.scroll = new BetterScroll(this.$refs.wrapper)
})
}
}style
section{
flex: 1;
overflow: hidden;
height:100vh;
}
发布时间：2022/07/22
发表评论