1.安装better-scroll
npm install better-scroll --save
2. 引用
import Bscroll from ‘better-scroll’
3.注意的问题
div部分注意的问题
style部分注意的问题
在滚动的区域一定要加上绝对定位,translate属性要根据当前div位于屏幕的位置计算展示区域的高度
position:absolute
top: 0
left :0
bottom:0
right:0
上下左右根据div要摆放的位置而定
例子
<template>
<div class="list" ref="wrapper">//标注dom 滚动区域
<div>//滚动区域只能由一个大的区块包裹住
<div class="area">
<div class="title">当前城市</div>
<div class="button-list">
<div class="button-wrapper"><div class="button">北京</div></div>
</div>
</div>
<div class="area">
<div class="title">热门城市</div>
<div class="button-list">
<div class="button" v-for="item of hot" :key="item.id">{{ item.name }}</div>
</div>
</div>
<div ref="areaCity">
<div class="area cityList" v-for="(item, key) of cities" :ref="key">
<div class="title">{{ key }}</div>
<div class="item-list" v-for="city of item" :key="city.id">
<div class="item border-bottom">{{ city.name }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import Bscroll from 'better-scroll'
export default{
name:'CityList',
props:{
cities:{
type:Object
},
hot:{
type:Array
},
letter:{
type:String
}
},
data(){
return{
scrollY:0,
listHeight:[]
}
},
mounted(){
//滚动操作
this.scroll = new Bscroll(this.$refs.wrapper,{
click:true,
probeType:3
})
//获取当前滚动的位置
this.scroll.on('scroll',(pos) => {
this.scrollY = Math.abs(Math.round(pos.y))
})
this.catculateHeight()
},
watch:{
//监听letter是否改变
letter(){
if(this.letter){
//获取标注div的内部元素
const element = this.$refs[this.letter][0]
//根据获取到的div可以滑动到相应的位置
this.scroll.scrollToElement(element,300)
}
},
scrollY(){
this.currentIndex()
}
},
methods:{
//获取每个区块的高度并填入listHeight数组中
catculateHeight(){
let height = 0
let cityList = this.$refs.areaCity.getElementsByClassName('cityList')
this.listHeight.push(height)
for(let i=0 ; i<cityList.length; i++){
let item = cityList[i]
//获取每个div的高度
height += item.clientHeight
this.listHeight.push(height)
}
},
currentIndex(){
//判断索引指向的位置
for(let i=0;i<this.listHeight.length;i++){
let height1 = this.listHeight[i]
let height2=this.listHeight[i+1]
if(this.scrollY>=height1 && this.scrollY<height2){
this.$emit('current',i)
}
}
}
}
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
.border-topbottom
&:before
border-color #ccc
&:after
border-color #ccc
.border-bottom
&::before
border-color #ccc
.list
overflow hidden
position absolute
top 79px
left 0
right 0
bottom 0
.title
line-height 27px
background #eee
padding-left 10px
color #666
font-size 13px
.button-list
overflow hidden
padding 5px 12px 5px 5px
.button
float left
width 29%
margin 5px
text-align center
border 1px solid #ccc
.item-list
.item
line-height 38px
padding-left 10px
</style>
<template>
<ul class="list">
<li
class="item"
v-for="(item, index) of letters"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@click="handleLetterClick"
:class="{ current: currentIndex === index }"
:ref="item"
>
{{ item }}
</li>
</ul>
</template>
<script type="text/ecmascript-6">
export default{
name:'CityAlphabet',
props:{
cities:{
type:Object
},
currentIndex:{
type:Number
}
},
computed:{
letters(){
const letters = []
for (let i in this.cities){
letters.push(i)
}
return letters
}
},
data(){
return {
touchStatus:false
}
},
methods:{
handleLetterClick(e){
this.$emit('change',e.target.innerText)
},
handleTouchStart(){
this.touchStatus = true
},
handleTouchMove(e){
if(this.touchStatus){
const startY = this.$refs['A'][0].offsetTop
const touchY = e.touches[0].clientY - 79
const index = Math.floor((touchY - startY)/20)
if(index >=0 && index < this.letters.length){
this.$emit('change',this.letters[index])
}
}
},
handleTouchEnd(){
this.touchStatus = false
}
}
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
.list
display flex
flex-direction column
justify-content center
position absolute
right 0
top 79px
bottom 0
width 20px
.item
line-height 20px
text-align center
color $bgColor
&.current
color #ccc
</style>
4.横向滚动的方法
需要注意的问题是 要计算div的宽度 才能实现滚动