better-scroll 的使用（实现滑动，解决默认向上滚动一段距离，实现字母索引导航）
better-scroll 实现滑动页面
[下载]
npm i better-scroll --save
[引入]
在需要的文件里引入
import BScroll from 'better-scroll'
[html结构]
一个大的.wrapper 和.content 注意，需要滑动的页面在一个div中进行包裹
<div>
<div class="wrapper" ref="wrapper">
<div class="content">
<div class="hotcity">
<!-- 解决betterscroll 默认向上滚动一段距离 因为margin的原因 1：加上下面代码 2：将margin改为padding -->
<!-- <div style="height: 1px;margin-top: -1px"></div> -->
<h5 class="title">热门城市</h5>
<div class="hotcity">
<ul>
<li v-for="item in hotcitylist" :key="item.id" class="border-bottom border-right" @click="tocity(item.cityName)"><a>{{item.cityName}}</a>
</li>
</ul>
</div>
</div>
<div class="sort">
<div class="items">
<h5 class="title">字母排序</h5>
<div class="sort">
<ul>
<li v-for="item in sort" :key="item.id"><a @click="changeSort(item.cityName)">{{item.cityName}}</a></li>
</ul>
</div>
</div>
<!-- 定位 -->
<div class="items" v-for="item in sort" :key="item.id" :ref="item.cityName">
<div style="height: 1px;margin-top: -1px"></div>
<h5 class="title">{{item.cityName}}</h5>
<div class="sort">
<ul class="itemsadress">
<li v-for="item in character" :key="item.id" class=" character" @click="tocity(item.cityName)"><a>{{item.cityName}}</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper" ref="wrapper"> // 一个包装
<div class="content"> // 一大块内容
... // 具体内容
...
...
</div>
</div>
[css片段]
.wrapper {
background-color: #f5f5f5;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 1.48rem;
overflow: hidden;
}
方法
<script>
// import Sort from '@/components/cityList/sort.vue'
import { mapMutations } from 'vuex'
import BScroll from 'better-scroll'
export default {
mounted() {
console.log(this.$refs.wrapper)
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: 3,
})
// this.scroll.on('scroll', position => {
// // console.log(position)
// })
},
methods: {
changeSort(value) {
console.log(value);
console.log(this.$refs[value][0]);
this.scroll.scrollToElement(this.$refs[value][0]) //定位
},
tocity(value){
console.log(value);
this.$router.push('/home')
this.changeCity(value)
},
...mapMutations(['changeCity'])
}
}
</script>
probeType
类型：Number
默认值：0
可选值：1、2、3
作用：有时候我们需要知道滚动的位置。
当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；（在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测。）
当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。( 就是我们用手用力滑动的时候，手放开之后，屏幕还在滑动，这就叫momentum 滚动动画 )
如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
————————————————
版权声明：本文为CSDN博主「阿清呀.」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wzg0817/article/details/108013765
解决默认向上滚动一段距离
解决betterscroll 默认向上滚动一段距离 因为margin的原因 1：加上下面代码 2：将margin改为padding
[实现字母索引导航]
避坑：滑动页面应该在一块在一个页面上，不要拆分成组件，一个页面写一个wrapper，我把下面字母索引导航单独写了一个A组件，又引了一遍import BScroll from 'better-scroll' ，然后放在其他B组件里，而且B组件本身也引用scroll ，结果就是不报错，但是也不跳动的对应的地方，琢磨很久，最后把A组件代码复制粘贴到B组件，实现想要的效果。
methods:{
changeSort(value) {
console.log(value);
console.log(this.$refs[value][0]);
this.scroll.scrollToElement(this.$refs[value][0]) //定位
}
}
this.scroll.scrollToElement(this.$refs[value][0])
使用scrollToElement来进行索引导航
