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来进行索引导航