如何使用better-scroll以及遇到滑动失效等问题（vue）

当我们在移动端上进行触控滑动的时候，明明代码写的没有什么问题，但就是滑动十分的不流畅，用了很多css样式和数据优化都改变不大，于是在尝试用better scroll了之后，解决了这个问题。

但在第一次尝试使用的时候，遇到了引入了better scroll，但就是页面组件里不滑动。（我使用的是在页面中单个组件滑动）
总结了一下，有一下几点在使用的时候需要注意的地方：

1:首先就是在需要滑动的组件中引入（先npm下好组件）

import BScroll from "better-scroll";

2:一定要在外层（包裹v-for的div）再嵌套一层，且高度要小于里面那层的div

 <div class="wrapper" ref="wrapper" > //外层再嵌套的一层
			<div class="card-list" v-show="showCourse" ref="cardlist"> //外层（包裹v-for的）
				<div class="card" v-for="(item, index) in list" @touchstart="checkCard(index, item.id)">
				单个小内容
				</div>
			</div>
 </div>

//用的是平板的屏幕数据，大家按自己的来就好（  overflow: hidden 一定要有）
 .wrapper{
                height: calc(100vh - 455px);
                overflow: hidden;
                width: 100%;
            }
//外层div没什么特殊的css，按照自己来的就好，最好是加上min-height，保证最初渲染的时候比外面嵌套的div大
.card-list {
                min-height: 1400px;
                display: flex;
                flex-wrap: wrap;
			}

3:如何使用better scroll，我在网上看到监听各种写在created、mounted、update里的，我各种尝试后，最终写在mounted和watch里的。
如果是电脑上用鼠标测试，一定要加 mouseWheel: true,//开启鼠标滚轮，disableMouse: false,//启用鼠标拖动。不然鼠标就会滑不动，在上线移动端的时候，要加disableTouch: false//启用手指触摸，（注意是dis开头，所以要状态是false才表示启用！）

 watch:{
            list(){
                setTimeout(()=>{
                    this.initScroll()
                },200)
            }
        },
 mounted() {
            this.initScroll()
        },
		methods: {
            initScroll() {
                this.$nextTick(()=>{
                    console.log(this.scroll,this.$refs.wrapper.offsetHeight,this.$refs.cardlist.offsetHeight)
                    //可以打印看看是否内部高度大于外部高度
                    if(!this.scroll) {
                        this.scroll = new BScroll(this.$refs.wrapper,{
                            click: true,      // 配置允许点击事件
                            scrollY: true,   // 开启纵向滚动
                            mouseWheel: true,//开启鼠标滚轮
                            disableMouse: false,//启用鼠标拖动
                            disableTouch: false//启用手指触摸
                        })
                        console.log(this.scroll)
                    } else {
                        this.scroll.refresh()    // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
                        console.log(this.scroll)
                    }
                })
            },
            }

以上就是我在使用better scroll是遇到的坑，希望有帮助到大家～