better-scroll 踩坑总结

1、下载安装

1 npm install better-scroll --save

 

2、在项目中使用该插件的页面引入

1 import Bscroll from 'better-scroll'

3、实例化scroll

1  this.$nextTick(() => {
2             this.scroll = new Bscroll(this.$refs.wrapper,{
3                 scrollY: true,
4                 click: true, //设置为true 滚动元素可点击
5                 tap: true
6             })
7         })

 

4、项目实战，我这边主要写一个类似于电话本的列表点击定位到页面顶端的功能  主要代码：brandList.vue 组件

  1 
 23 
 66 

5、右侧字母组件 brandName.vue

 1 
19 
54 

6、在父组件中调用  classifiCation.vue 

》js引入

1 import brandList from './components/brandList'
2 import brandName from './components/brandName'

》组件注入

 components:{
        brandList,
        brandName
    },

》模板注入

1  2             :branchTitle= "branchTitle"
3             :brandList= "brandList"
4             :letter= "letter"
5         >
6         7             v-show= "contentIdx == '1'" 
8             :brandList= "brandList"
9         >

7、具体实现效果图示